A simple little WordPress block that allows you add an SVG icon or graphic to your website.

Sometimes I see in console:

Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <div>. See https://reactjs.org/link/warning-keys for more information.
div
No<@https://.../wp-content/plugins/icon-block/build/index.js?ver=0084d35570e783e202ca0d63d6e4ecad:2:6239

All maps have keys so I'm stumped why this error would occur. It doesn't seem to break anything.

PS: If it's of interest your plugin works perfectly with WP 6.0 Beta3, I've tested it today.

I updated the description of this issue to remove refereneces to my fork which turned out to be a separate issue & not linked to the missing keys.

I've followed your excellent tutorial here to add custom SVG icons but I'm losing the styling as they're designed.

Here is an example:

But it appears in the icon library like this:

Is there any way to retain the styling (colours) of them? I've kept the complete SVG code intact.

I would love to see a way to manage/customize the icon library. It's the one thing stopping my agency from using this plugin vs. an internally developed one, since we want our clients to be able to select from a library of custom icons and potentially be able to add new ones.

I realize that you can paste custom SVG code, but that only works for admins and might be prone to user error. We would have to maintain some kind of external SVG copy/paste library or put every icon somewhere they could copy/paste from, or even create block variations for every one.

Is this something that might be considered as a potential feature?

Thanks for the great plugin.

I put it on WordPress 5.8 and found that when I click on the "Brouse icon Library" button, the block breaks.

Please see:

https://user-images.githubusercontent.com/54422211/152667774-d316a50d-0974-40e0-bdce-5772b8d7dd16.mp4

I think this is because the SearchControl component has not been implemented in WordPress 5.8.

The SearchControl component was implemented in Gutenberg 11.1.0, but the version of Gutenberg included in WordPress 5.8 is 10.7.

So you might want to replace it with a component such as TextControl if you will support WordPress 5.8.

It would be great if you allowed more units than pixels. I'm a fan of "em" / "rem" so that the width adjusts to current font sizes. Of course it is always easier to use pixel units in a slider, but just allow the values to change in 0.1 steps and also add an input field so that you can really enter all values.

If you install the block from the plugin inserter, the placeholder content does not render correctly. This only appears to happen in WordPress 5.9 without Gutenberg installed. If you refresh the page after installing the plugin, everything looks as it should. With Gutenberg installed, everything appears as it should at all times. While this issue will likely resolve itself with the 6.0 release, we should investigate the source.

Render bug without Gutenberg installed

To fix #3. I ran into the issue and this was the quickest fix I found. I'm not sure why but html-react-parser will mangle those attributes and this gets around with a little addition to the replace option.

I've not tested it extensively but works well for all the icons I've tried so far.

Hi !

First: thanks for this block, it's really usefull :)

For the bug: When I update my color scheme, icon color aren't updated. It's because you assign the value when saving. So I use the snippet below to force the use of CSS dynamic var, but it's kinda tricky, isn't?

function w_replace_color_value_by_dynamic_color_var( $block_content, $block ) {
  if ( $block['blockName'] === 'outermost/icon-block' ) {
    if ( $block['attrs']['iconColor'] !== $block['attrs']['iconColorValue'] ) {
      $block_content = str_replace(
        $block['attrs']['iconColorValue'],
        sprintf('var(--wp--preset--color--%s)', $block['attrs']['iconColor']),
        $block_content );
    }
  }
  return $block_content;
}
add_filter( 'render_block', 'w_replace_color_value_by_dynamic_color_var', 10, 2 );

What do you think about passing color varname to render instead?

This issue was reported here: https://wordpress.org/support/topic/the-role-attribute-to-svg-cause-ada-compliance-issue/

The role=”img” attribute you give to your inbuilt svg cause ADA compliance issue, for example look at this site ADA result https://siteimprove.com/en-us/accessibility/result/?website=https://valleyfootanklecenter.com/ (see the last error “WAI-ARIA image is missing alternative text”) I think you should either remove role=”img” or provide an input field to add custom area-label attribute value.

Hi there!

This block is really great, but not very accessible.

I think it lacks a "label" field when adding a link to the icon to prevent it from being "empty". And it also lacks an option to add the attribute aria-hidden="true" on the whole block when it's about decorative elements.

Fixes #18

Previously, the icon color and background color were set to a theme's color palette and would not update when the palette was changed. The color hex values were hard coded. This PR keeps the hard-coded color values and adds the relevant CSS classes for the palette colors. The CSS classes override the hard-coded color values. However, if the palette color variable no longer exists, which can occur when switching themes, the hard-coded color values serve as a backup.

Upgrade the placeholder component so that you can drop an .svg file onto the placeholder, and it will automatically insert the custom SVG. This functionality would be similar to the Image block placeholder, but the .svg is not actually uploaded. The SVG is just added to the custom SVG field.

There should also be a way to do this in the custom SVG modal.

Ported from the support forum on WordPress.org

"Could we get hover color options? If we create a link for the icon, it would be nice to have some kind of hover color options for both link and background. Thanks"