How to Use SVG images in Your JavaScript Projects with Webpack

In a previous post I explained how to work more easily with JavaScript projects thanks to the package @wordpress/scripts. There is no doubt that thanks to this package and the command wp-scripts that it includes, transpiling JavaScript is a child’s game.

Dealing with complex configurations of Webpack, Babel and other tools is something you don’t need to worry about anymore. But if your needs are more advanced and wp-scripts falls short, don’t worry because its versatility allows you to expand its default possibilities using your own Webpack configuration file.

This, which may seem unnecessary when you are starting to develop with JavaScript for WordPress (and specifically for Gutenberg), is somewhat more common than you think. A simple example that will help you understand why you will have to use your own Webpack configuration is that by default wp-scripts (the configuration of Webpack that it includes) does not allow you to work with SVG files in your JavaScript code.

Therefore, if you have a piece of JavaScript code as simple as the one you see below, where we render a component that draws an SVG image file, when using wp-scripts to transpile the code you will get an error.

From here I encourage you to go through the documentation of wp-scripts to see everything you can do with this utility. If you have done this, you will see that there is a section in which you’ll learn how to extend it to use your own Webpack configuration.

In order to work with SVG image files, what we do is use the package svg-react-loader that allows us to import the SVG files as you see in the JavaScript component of the previous code. What we have done is to write the path to the SVG file icon.svg and import it into the Icon variable.

The name of the variable that the SVG file imports is not accidental. We use a name that starts with an uppercase character in order to use it directly in our JSX code as the regular component <Icon />

For this JavaScript code to work, the first thing we need to do is add the svg-react-loader package as a dependency in our project using the following npm command:

npm install svg-react-loader --save-dev

Once this is done, we just need to create the webpack.config.js file in the root of our project, right in the same place where we have the package.json file. If we put it there, the package @wordpress/scripts will use it directly instead of the default configuration.

The content of webpack.config.js is what you can see below:

If you look at the contents of the webpack.config.js file, you will see that what we do is to use the values of the default configuration that is in the defaultConfig variable, extending it when necessary with new configurations.

In this case, we modify the rules section, where we added a new rule to process the files ending with .svg using the package svg-react-loader we installed earlier. This way, any SVG file we load behaves as a component that we can use in our JSX code to render SVG images extending wp-scripts with our changes.

Note that this helps you extend the default configuration and process CSS files or anything else you can think of with Webpack. Tune your own webpack.config.js file extending the one that comes by default with wp-scripts and forget about everything else.

If you have any questions or use wp-scripts in another way, you have no choice: leave us a comment! It’s nice to know that there are people on the other side…

Featured image by Kira auf der Heide on Unsplash.