One of my favorite block plugins is the Icon Block.
In this article, I want to highlight this and a few other use cases for this plugin.
I also want to touch on SVGs in WordPress, and why it’s important to follow a couple of security precautions.
Sample use cases
Using WordPress icons
WordPress includes a set of icons in the @wordpress/icons package. The block editor uses these icons as an internal dependency. So they are not exposed to users by default.
The Icon Block gives you a way to access these icons. Beyond that, the Icon block also includes all the social icons that are part of WordPress.
As these icons do not always make sense on a public website, you can filter them. For this you can use the iconBlock.icons JavaScript hook to remove unwanted icons.
Adding your own custom icon library
You can also register your own icon library.
This is useful if the website you are working on has its own set of icons that are part of its visual identity.
Uploading your own icons
If you want to add your own icons, you can:
- Select them from the Media Library, if you have allowed SVGs.
- Paste the SVG markup into the inserter
And that brings me to my last, but very important point.
A word on SVG and security
WordPress Core does not allow you to upload any SVGs into the Media Library.
The reason behind this is the SVG is not an image format. It’s a document format. Which is why SVGs are markup, and not files.
And this format supports a lot of features that are not needed for rendering images. Like for example loading JavaScript. Which course makes uploading SVG icons from third party sources a big no-no.
If you want to go down the rabbit hole, you can read through Core Trac #24251.
So what to do?
Install the Save SVG plugin from 10Up. It has two key features:
- It sanitizes SVGs on upload. Sanitizing is a fancy word for “removing stuff that does not belong in there”.
- It adds SVG previews the Media Library. Because by default WordPress will only show a file icon.
Another curious aspect about SVGs is that their markup is not always the most efficient.
So before uploading to WordPress, you can use a tool like SVGOMG to try and reduce the size of the markup.
