Learn how to add SVG icons to the Gutenberg editor.
Have you ever wanted to include and add an SVG icon or two on your page, via the Gutenberg editor? Without the need to install a WordPress plugin or load an entire set of web fonts.
Well here is a quick and easy trick that you may want to try.
We are going to use the SVG file format which will make it easier for your icons to scale and have the same quality on different screens. Also, you could easily customize them with CSS (change color, add a background, etc.).
In addition, by using SVG we will have a faster load and improve page speed performance.
Note: There is already a built-in icon font within WordPress called Dashicons, but at this moment the icon set is pretty limited and it does not utilize the SVG file format. (very soon this might change and give us some additional icons in SVG)
We will load the SVG as Image Block and you can either use the API URL or CSS method. The first one will load the SVG to Gutenberg via an API link and for the second one, we will convert the SVG into CSS and load it as a background image.
We are going to use Iconify.design library but you can utilize the same with any other SVG icons.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M19 19H5V5h14m0-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-2.5 13.25c0-1.5-3-2.25-4.5-2.25s-4.5.75-4.5 2.25V17h9M12 12.25A2.25 2.25 0 0 0 14.25 10A2.25 2.25 0 0 0 12 7.75A2.25 2.25 0 0 0 9.75 10A2.25 2.25 0 0 0 12 12.25z" fill="#626262"></path></svg>
What’s the difference you may as between the two methods? In the second one even though more steps are required we don’t rely on the API server. This way if the server has a downtime the icons will still display on our page.
The Iconify library has an option to install an API client on your server and include icons without the need to do all of the steps above. Actually there are several different ways you could use the library, take a look at their documentation page and see which one best fits your needs.
‘TIl the next time.
* We have a NO SPAM policy so you won't reaceive any meaningless emails from us!