Custom SVG Icons for Gutenberg Blocks in WordPress

This post covers a straightforward way to use custom SVG icons in Gutenberg blocks.

It is intended as an alternative to some of the methods covered in older tutorials such as Zac Gordon’s 2017 post How to Add Custom Icons to Gutenberg Editor Blocks in WordPress.

Install Dependencies

Use npm or yarn to install the @svgr/webpack and url-loader dependencies:

yarn add @svgr-webpack --dev
yarn add url-loader --dev

Add the following to the rules array in your webpack config:

{
  test: /\.svg$/,
  use: [ '@svgr/webpack', 'url-loader' ],
},

If you are using the boilerplate @wordpress/scripts included webpack.config, an example is conveniently in the docs where the boilerplate is loaded and spread (via the spread operator) into a custom config file where you can then make additions of your own, such as the above block to support SVG’s:

The WordPress docs even use @svgr/webpack in their example customized webpack.config, but they don’t cover how to actually make use of this package.

Using SVG Icons as Components

You can now import icons as Reqct Components in your blocks.js (or whichever) file where you call registerBlockType() to register a new block:

import { ReactComponent as MyIcon } from '../../assets/svg/ui/icon.svg'

As an aside, note that you also have the option of importing a base-64-encoded svg via the default export created by @svgr/webpack: import myIconSvg from '../../assets/svg/ui/icon.svg'

Specifying the SVG Icon for your Block

In the block configuration object passed to registerBlockType(), specify your icon component without encapsulating it in a JSX tag:

registerBlockType( 'example/my-block', {
  ...
  icon: MyIcon
  ...
}

Using SVG Icon Components in Block edit() and save() Methods

You can also use the component you imported (e.g. <MyIcon />) as a JSX tag in your edit and save functions.

registerBlockType( 'example/my-block', {
  ...
  icon: MyIcon
  ...
  edit: () => (<div><MyIcon /></div>)
  ...
}

Note About SVG’s

Not all SVG’s are created equal. I have had success with those that define a square viewBox and set a width and height of “1em”.

Published by

@firxworx

Kevin Firko (@firxworx) is an entrepreneur, developer, and digital project manager based in Toronto, Canada. He works on ventures and client projects through Bitcurve, the independent digital design and development studio he founded in 2008.