Originally posted on my website on June 20 2019
Gutenberg custom svg icons.
In this article i want to show you how you can add custom svg icons to your Gutenberg blocks and plugins.
When i started working with custom blocks this had me googling around for a bit and not really finding the right solution. I finally found half of the answer in the source code for CoBlocks, and the rest in this and this question on Stack-overflow.
Out of the box you can use the standard WordPress Dashicons by passing their name. But if you want to use your own custom icon, you can't just simply provide a url. You must pass the SVG as a Object/Component.
So before you start googling yourself, here is the solution i found.
The SVG icon.
For this example I downloaded a SVG GitHub icon form simpleicons.org. Now if you download this icon and open the file in your code editor you get something like shown below:
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
The important part to notice here is that the SVG markup must have an viewBox="" attribute. The first time i wanted to make an icon i used a free online png to svg convertion tool, and for some reason the result didn't have this attribute. Punishment for being cheap i guess :p
Add a class to your SVG.
If you want to be able to scale your icon or if you want to change it's color using Css it's a good idea to add a custom class to your SVG markup like shown below:
<svg class="custom-icon custom-icon-github" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
Using the SVG in the Gutenberg editor.
To use an SVG icon within the Gutenberg editor create a new js file, I called it icons.js, with the following contents.
In this example we use a javascript object called icons to store the SVG icon. This way we can add multiple icons and keep them all in one place. Note that there are no parentheses around the SVG data.
Custom icon for your Gutenberg plugin.
Many functions and components within Gutenberg have an icon's prop where you can simply pass a reference to the icon. Like in the example shown below where we first import the icons object and then pass the github icon to the registerPlugin function like shown below.
Custom icon for your Gutenberg block.
The process for blocks is pretty much the same. Just import the icons object and pass the icon to the registerBlockType function like shown below:
Custom icon for your own components.
if you want to show your custom icon in your own components the process takes an extra step since there is no icon prop to pass your icon to. In these cases you can import the Icon component from wp.components and add that to your component passing it your own SVG icon like shown below.
Done.
A simple solution to a simple problem, but i hope it helps you from googling this like i did. 😉
Thanks.
Top comments (0)