It would be nice if you could supply a file path when registering an icon instead of having to cram the SVG markup into a Javascript variable.

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?

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.

We're trying to use what would effectively be two taxonomies for our Icon categories. Ideally, we'd love to have them separated in the UI:

Animals

• Cats
• Dogs
• Elephants

Plants

• Bushes
• Trees

(Note that we don't want them to be separate Icon Types because icons can have terms from multiple taxonomies).

A less-involved approach might be simply letting us opt out of sorting the Icons alphabetically, and just presenting them in the order they are present in the array. That would at least let us group the terms of each taxonomy together. This method would benefit from the ability to add labels/headings in the array, but that's probably getting a bit "out there", especially as it feels like a wonky workaround for just supporting multiple taxonomies, which I assume is out of scope. Something like:

const customIconCategories = [
{
name: 'Animals',
title: __( 'Zebra', 'ext-icon-block-modifier' ),
is_heading: true
},
{
name: 'cats',
title: __( 'Cats', 'ext-icon-block-modifier' ),
},
{
name: 'dogs',
title: ( 'Dogs', 'ext-icon-block-modifier' ),
},
{
name: 'Plants',
title:('Plants', 'ext-icon-block-modifier',
is_heading: true
}
];

Cheers!

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

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.

Environtment

Wordpress 5.8.2

Using this plugin in combination with the plugin wp-rest-blocks which exposes block attributes in the Wordpress RestAPI.

Problem

Playing around with this plugin I encountered the following:
The block attribute flipHVertical does not Update in the RestAPI and thus leads to a faulty block when a post with an icon-block which has flipped vertically is reloaded in the editor ("This block contains unexpected or invalid content").

Possible Soloution

I just skimmed through your source code and found that in block.json you defined the following attributes:

  "flipHorizontal": {
	  "type": "boolean"
  },
  "flipHVertical": {
	  "type": "boolean"
  },

I guess flipHVertical may be a typo and should be replaced by flipVertical.

BTW: great plugin, I am enjoying working with it and it was kind of what I was searching for.

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?

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.

I would love be able to set the height of the svg in the block editor. Right now they get 100% height from .wp-block-outermost-icon-block svg

Hello!

I'm working on the Italian localization of the Icon Block, and I stumbled upon a possible typo.

One of the Justify icons says "Justify tretch", instead of - most likely - "Justify Stretch"

Can you please look into it?

Thanks!

Hello Nick

It would be nice to be able to add inline icons to navigation items similar to how we can add inline images.

Cheers!

Much like how Blocks can have invisible keywords that let them appear in a larger number of search results, it'd be great if Icons could as well.

For example, the Warning icon may want keywords such as "exclamation", or the Shipping icon might want 'truck'.

You never know what people are going to search for or how they'll 'remember' the name of an icon 😅

Issue ported from WordPress.org support forum:

hello!
maybe you can add a small check box to deactivate the :hover-effects?

i got it with a css hack now: (the path tags of the svg are linked with a tags, that’s why i used the a:hover)

.wp-block-outermost-icon-block svg g a:hover {
transform:unset !important;
}

Not sure if/how this would be possible, but since it's fairly common for CTAs to have some form of an icon associated with them it would be nice if this could be an option for the native core/button. I know there is the hacky insert-inline-image solution, but ideally having the option of picking from an available list of icons and then being able to position it to the left / right of the text would be great. Have you given any thought of doing that with your Icon Block or do the cons outweigh the pros?

transition: all is a bad idea because it affects layout properties, which causes jank during page layout because any changes get animated. Background info: https://www.pno.dev/articles/dont-use-the-all-keyword-in-css-transitions/

Hey,
I think it would be great if when creating a custom icon to the block that certain icons or categories could have custom classes.

example
{ isDefault: true, name: 'bookmark', title: __( 'Bookmark', 'icon-block' ), icon: '<svg width="24px" height="24px" viewBox="0 0 24 24"><path d="M15.5,4.25 L9,4.25 C7.48121644,4.25 6.25,5.48121644 6.25,7 L6.25,19.5 L6.25678483,19.6039817 C6.33269168,20.17682 7.02861659,20.4632798 7.48809353,20.0694425 L12.25,15.988 L17.0119065,20.0694425 C17.4984115,20.4864467 18.25,20.1407649 18.25,19.5 L18.25,7 C18.25,5.48120782 17.0188049,4.25 15.5,4.25 Z M15.5,5.75 L15.6278083,5.75645347 C16.2581415,5.82046462 16.75,6.3527795 16.75,7 L16.75,17.869 L12.7380935,14.4305575 L12.63989,14.3592262 C12.3667749,14.1927863 12.0115663,14.2165634 11.7619065,14.4305575 L7.75,17.868 L7.75,7 C7.75,6.30964356 8.30964356,5.75 9,5.75 L15.5,5.75 Z"></path></svg>', categories: [ 'category-one', 'category-two' ], class: ['custom-class'] },

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.

When adding custom icons, ot would be great if you didn't have to jump through the hoops of registering a script and adding a filter and could just creating a flat file that looked like this:

{
  "version": 1,
  "iconTypes": [
    {
      "isDefault": false,
      "type": "example-icons",
      "title": "Example Icons"
    }
  ],
  "iconCategories": [
    {
      "name": "category-one",
      "title": "Category One"
    },
    {
      "name": "category-two",
      "title": "Category Two"
    }
  ],
  "icons": [
    {
      "isDefault": true,
      "name": "bookmark",
      "title": "Bookmark",
      "icon": "<svg width='24px' height='24px' viewBox='0 0 24 24'><path d='M15.5,4.25 L9, 4.25 C7.48121644, 4.25 6.25, 5.48121644 6.25, 7 L6.25, 19.5 L6.25678483, 19.6039817 C6.33269168, 20.17682 7.02861659, 20.4632798 7.48809353, 20.0694425 L12.25, 15.988 L17.0119065, 20.0694425 C17.4984115, 20.4864467 18.25, 20.1407649 18.25, 19.5 L18.25, 7 C18.25, 5.48120782 17.0188049, 4.25 15.5, 4.25 Z M15.5, 5.75 L15.6278083, 5.75645347 C16.2581415, 5.82046462 16.75, 6.3527795 16.75, 7 L16.75, 17.869 L12.7380935, 14.4305575 L12.63989, 14.3592262 C12.3667749, 14.1927863 12.0115663, 14.2165634 11.7619065, 14.4305575 L7.75, 17.868 L7.75, 7 C7.75, 6.30964356 8.30964356, 5.75 9, 5.75 L15.5, 5.75 Z'></path></svg>",
      "categories": [
        "category-one",
        "category-two"
      ]
    },
    {
      "name": "cloud",
      "title": "Cloud",
      "icon": "<svg width='24px' height='24px' viewBox='0 0 24 24'><path d='M12.0297869,6.25477399 C9.69310799, 6.35627347 7.76028359, 8.06517251 7.33640731, 10.3195752 L7.33, 10.357 L7.17131855, 10.3970995 C5.4791682, 10.8693286 4.25, 12.4228808 4.25, 14.25 C4.25, 16.4591229 6.04086573, 18.25 8.25, 18.25 L16.25, 18.25 C18.4591136, 18.25 20.25, 16.4591136 20.25, 14.25 L20.2449807, 14.0481533 C20.1583164, 12.3092839 18.9581728, 10.8518379 17.3286997, 10.3970993 L17.169, 10.357 L17.1636012, 10.3195631 C16.726443, 7.99471518 14.6845932, 6.25 12.25, 6.25 L12.0297869, 6.25477399 Z M12.25, 7.75 C14.1089517, 7.75 15.641164, 9.20368247 15.7444701, 11.050879 C15.7655051, 11.4270003 16.0622764, 11.7291586 16.4379585, 11.7569554 C17.7370378, 11.8530748 18.75, 12.9390845 18.75, 14.25 C18.75, 15.6306864 17.6306864, 16.75 16.25, 16.75 L8.25, 16.75 C6.86929499, 16.75 5.75, 15.6306979 5.75, 14.25 C5.75, 12.9390902 6.76297645, 11.8530752 8.06206149, 11.7569554 C8.43774872, 11.7291582 8.7345221, 11.4269924 8.7555506, 11.0508656 C8.85882307, 9.20368024 10.391028, 7.75 12.25, 7.75 Z'></path></svg>",
      "categories": [
        "category-one",
        "category-two"
      ]
    },
    {
      "name": "heart",
      "title": "Heart",
      "icon": "<svg width='24px' height='24px' viewBox='0 0 24 24'><path d='M6.08714334,6.32932979 C3.96268923, 8.06801188 3.63859886, 11.0218225 5.33411073, 13.1117301 L5.40693404, 13.189484 L11.735394, 19.050284 C12.0229467, 19.3165872 12.4670552, 19.3165879 12.7546087, 19.0502856 L19.0831087, 13.1894856 L19.1559241, 13.1117421 C20.8618901, 11.009037 20.5476544, 8.03670134 18.3950317, 6.32296945 L18.2021622, 6.17656493 C16.3839665, 4.86189789 14.0726771, 4.99410522 12.3732475, 6.33543793 L12.244, 6.441 L12.1137885, 6.33327648 C10.4051427, 4.9868485 8.07169216, 4.85041921 6.27728692, 6.18112693 L6.08714334, 6.32932979 Z M11.6855857, 7.98275475 C11.9837742, 8.31667652 12.5062017, 8.31668548 12.8044017, 7.98277393 C14.0606994, 6.57602557 16.0037503, 6.33654686 17.4607748, 7.49649577 L17.6164202, 7.627428 C18.9226437, 8.78850986 19.1174439, 10.620049 18.1123793, 12.0085048 L18.021, 12.127 L12.245, 17.477 L6.468, 12.127 L6.49897378, 12.1666936 C5.32705305, 10.7221704 5.54794474, 8.70892882 7.0371596, 7.49013516 C8.45843106, 6.32695371 10.4260915, 6.57232977 11.6855857, 7.98275475 Z'></path></svg>",
      "categories": [
        "category-one"
      ],
      "keywords": [
        "love"
      ]
    },
    {
      "name": "mail",
      "title": "Mail",
      "icon": "<svg width='24px' height='24px' viewBox='0 0 24 24'><path d='M17.5,5.25 C19.0188049, 5.25 20.25, 6.48120782 20.25, 8 L20.25, 8 L20.25, 16.5 C20.25, 18.0188136 19.0188136, 19.25 17.5, 19.25 L17.5, 19.25 L7, 19.25 C5.48120782, 19.25 4.25, 18.0188049 4.25, 16.5 L4.25, 16.5 L4.25, 8 C4.25, 6.48121644 5.48121644, 5.25 7, 5.25 L7, 5.25 Z M18.7288492, 7.76980088 L12.7469304, 13.0617474 C12.4915617, 13.2876505 12.1206612, 13.3102408 11.8421862, 13.1295183 L11.7530696, 13.0617474 L5.77115144, 7.76980412 C5.75726181, 7.84441732 5.75, 7.92136061 5.75, 8 L5.75, 8 L5.75, 16.5 C5.75, 17.1903743 6.30963146, 17.75 7, 17.75 L7, 17.75 L17.5, 17.75 C18.1903864, 17.75 18.75, 17.1903864 18.75, 16.5 L18.75, 16.5 L18.75, 8 C18.75, 7.92135923 18.7427384, 7.84441487 18.7288492, 7.76980088 Z M17.5, 6.75 L7, 6.75 C6.96190904, 6.75 6.92421603, 6.75170376 6.886993, 6.75503923 L12.249, 11.499 L17.612, 6.755 L17.5, 6.75 Z'></path></svg>",
      "categories": [
        "category-one"
      ]
    },
    {
      "name": "search",
      "title": "Search",
      "icon": "<svg width='24px' height='24px' viewBox='0 0 24 24'><path d='M11.25,4.25 C15.116007, 4.25 18.25, 7.3839999 18.25, 11.25 C18.25, 12.9128461 17.670205, 14.4402654 16.7017462, 15.6411267 L20.0303301, 18.9696699 C20.3232233, 19.2625631 20.3232233, 19.7374369 20.0303301, 20.0303301 C19.7640635, 20.2965966 19.3473998, 20.3208027 19.0537883, 20.1029482 L18.9696699, 20.0303301 L15.6411267, 16.7017462 C14.4402654, 17.670205 12.9128461, 18.25 11.25, 18.25 C7.3839999, 18.25 4.25, 15.116007 4.25, 11.25 C4.25, 7.38400644 7.38400644, 4.25 11.25, 4.25 Z M11.25, 5.75 C8.21243356, 5.75 5.75, 8.21243356 5.75, 11.25 C5.75, 14.2875792 8.21242628, 16.75 11.25, 16.75 C14.2875864, 16.75 16.75, 14.2875864 16.75, 11.25 C16.75, 8.21242628 14.2875792, 5.75 11.25, 5.75 Z'></path></svg>",
      "categories": [
        "category-two"
      ]
    },
    {
      "isDefault": true,
      "name": "user",
      "title": "User",
      "icon": "<svg width='24px' height='24px' viewBox='0 0 24 24'><path d='M11.800508, 4.25 C9.59136901, 4.25 7.800508, 6.040861 7.800508, 8.25 C7.800508, 10.459139 9.59136901, 12.25 11.800508, 12.25 C14.009647, 12.25 15.800508, 10.459139 15.800508, 8.25 C15.800508, 6.040861 14.009647, 4.25 11.800508, 4.25 Z M11.800508, 5.75 C13.1812199, 5.75 14.300508, 6.86928813 14.300508, 8.25 C14.300508, 9.63071187 13.1812199, 10.75 11.800508, 10.75 C10.4197961, 10.75 9.300508, 9.63071187 9.300508, 8.25 C9.300508, 6.86928813 10.4197961, 5.75 11.800508, 5.75 Z M11.800508, 13.5 C8.04670918, 13.5 5.68353852, 14.9106243 4.49655562, 17.1581489 C3.69148307, 18.6824832 4.93973466, 20.25 6.648008, 20.25 L16.953008, 20.25 C18.6612415, 20.25 19.9094839, 18.6825146 19.1045145, 17.1581755 C17.917388, 14.9105796 15.5542922, 13.5 11.800508, 13.5 Z M11.800508, 15 C15.00061, 15 16.8519251, 16.1050874 17.7781285, 17.8586756 C18.0005848, 18.2799324 17.6262539, 18.75 16.953008, 18.75 L6.648008, 18.75 C5.97474208, 18.75 5.60043156, 18.2799521 5.82293547, 17.8586605 C6.74903109, 16.1051199 8.60040067, 15 11.800508, 15 Z'></path></svg>",
      "categories": [
        "category-two"
      ]
    }
  ]
}

Important. Applies to WP icons only (not custom icons).

aria-hidden="true" will hide the element completely to assistive technology. The element will not be in the accessibility tree (kind of like the DOM tree) so a screen reader user will not know the element is there. The aria-label="*" will be ignored because it's hidden.

Additionally, when we add a link without adding a label attribute, the aria attribute returns an empty string (for WP & custom icons).

Right now, only the background can get a gradient color. I would like to color the icon itself in a gradient.

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.

I was playing with adding Padding to an Icon with a background color to increase the colored circle around it. Vertical padding seems to work as expected, but horizontal padding makes the icon disappear.

While playing a bit more with categories and how they're sorted (#40), I noticed the following:

When you first open the Icon Library, our categories are sorted Alphabetically.

After engaging with a control, such as the Preview Size or the Search box, they become sorted as presented in our array.

We have the Styles tab disabled, so that block Settings and Styles are all together. When this is the case, any key press in the Label input creates a duplicate Icon color control

When a template is in contentOnly mode, some media types (like images) can still be swapped out by the end user. I wonder if it would make sense for the Icon Block to offer the same functionality.

References:

• useBlockEditingMode - https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockeditingmode

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.

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:

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.

Hi,
I'm wondering why you have this relative deep structure just to show an svg.
I like to build a simple icon list (icon + text) but it's a bit inconvenient I think. You have to add a group, add icon plus text and rearrange both for perfect fit.

So after that the structure is:

• group-block
• wp-block-outermost-icon-block
• icon-container
• svg element

Perhaps I don't recognize why there is the outermost icon block.
Because it has a flex style my first thought was it's a kind of group, so I can just drag my text in it and have an icon + text.

That's my toughts about this.
Perhaps you could improve this or could help what's the best way to reach my goal: a lightweight way for an icon + text list.
Thanks!

When a category name gets on the longer side, it distorts the UI. Perhaps it could wrap lines instead?

Hi,
When uploading the Feather icon I'm getting the following errors in the console:

Warning: Invalid DOM property stroke-width. Did you mean strokeWidth?
Warning: Invalid DOM property stroke-linecap. Did you mean strokeLinecap?

You can test it with the icon I'm sending you.

Adding a custom icon with attributes such as fill-rule, stroke-width and stroke-dasharray, the hyphen in the attribute names are removed in the database and in the frontend. They do, however, show up correctly in the editor.

As an example, adding this custom icon in an icon block:

<svg width="59px" height="31px" viewBox="0 0 59 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="0,8.82" stroke-linecap="round" stroke-linejoin="round">
		<g transform="translate(-676.000000, -416.000000)" stroke="#006BBD" stroke-width="4">
			<g transform="translate(678.000000, 406.000000)">
				<path d="M0,23.8672205 C0.51521091,27.5290669 3.05554191,38.6619456 14.9182118,39 C22.513291,38.1738336 27.1592762,34.1390591 28.8561673,26.8956765 C31.4015039,16.0306026 48.3861799,2.86801104 55,20.9340055" id="Stroke-7-Copy-3"></path>
			</g>
		</g>
	</g>
</svg>

Ends up with this in the post content:

<!-- wp:outermost/icon-block {"iconName":""} -->
<div class="wp-block-outermost-icon-block items-justified-undefined"><div class="icon-container" style="width:48px"><svg width="59px" height="31px" viewbox="0 0 59 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsxlink="http://www.w3.org/1999/xlink"><g stroke="none" strokewidth="1" fill="none" fillrule="evenodd" strokedasharray="0,8.82" strokelinecap="round" strokelinejoin="round"><g transform="translate(-676.000000, -416.000000)" stroke="#006BBD" strokewidth="4"><g transform="translate(678.000000, 406.000000)"><path d="M0,23.8672205 C0.51521091,27.5290669 3.05554191,38.6619456 14.9182118,39 C22.513291,38.1738336 27.1592762,34.1390591 28.8561673,26.8956765 C31.4015039,16.0306026 48.3861799,2.86801104 55,20.9340055" id="Stroke-7-Copy-3"></path></g></g></g></svg></div></div>
<!-- /wp:outermost/icon-block -->

And renders in the frontend:

<div class="wp-block-outermost-icon-block items-justified-undefined"><div class="icon-container" style="width:48px"><svg width="59px" height="31px" viewbox="0 0 59 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsxlink="http://www.w3.org/1999/xlink"><g stroke="none" strokewidth="1" fill="none" fillrule="evenodd" strokedasharray="0,8.82" strokelinecap="round" strokelinejoin="round"><g transform="translate(-676.000000, -416.000000)" stroke="#006BBD" strokewidth="4"><g transform="translate(678.000000, 406.000000)"><path d="M0,23.8672205 C0.51521091,27.5290669 3.05554191,38.6619456 14.9182118,39 C22.513291,38.1738336 27.1592762,34.1390591 28.8561673,26.8956765 C31.4015039,16.0306026 48.3861799,2.86801104 55,20.9340055" id="Stroke-7-Copy-3"></path></g></g></g></svg></div></div>

But as mentioned, they are rendered with hyphens and look correct in the editor itself.

Hi, I keep running into this issue:

When I resolve the block it looks like the invalid content is just empty spaces:

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"

It would be fantastic to be able to insert icons inline, similar to how you can insert an Inline image in Core.

Hi Nick,

I noticed that block does not support SVG text elements in custom svg. I get zero width and height.
This test code works with the Custom HTML block, but not with the Icon block:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
    <text x="10" y="50" font-size="40" fill="black">WP</text>
</svg>

Cheers!

Is there no support for mobiles/tablets? I'm not sure how to scale the icons for smaller screens...