How to Use the SVG Symbol and React to Create Custom Icons

Using create-react-app 5.0 with React + SVG Symbol

We can use image icon fonts and inline SVG to make icons.

Comparison of the advantages of image icon fonts and inline SVG:

• Image and icon fonts need to be downloaded.
• Icon fonts and inline SVG are vectors, so you don’t have to worry about resolution.
• Only inline SVG support multicolor.

If you’re interested, check out this CSS Tricks piece comparing the icon fonts and inline SVG.

MDN explains the SVG Symbol:

The <symbol> element is used to define graphical template objects which can be instantiated by a <use> element.

The use of <symbol> elements for graphics that are used multiple times in the same document adds structure and semantics.

Create React project

Using create-react-app create a React project.

npx create-react-app project-name --template typescript

Override Webpack configuration

We can use react-app-rewired to override create-react-app webpack configs without ejecting.

npm install react-app-rewired --save-dev

Using svg-sprite-loader to handle SVG files.

npm install svg-sprite-loader --save-dev

Create a config-overrides.js file in the root directory.

Use SVG Symbol

Create icons directory in the src directory.

Create bold.svg file in the src/icons directory.

thebold.svg file:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M724.342857 477.028571c38.4-40 61.942857-94.057143 61.942857-153.485714v-11.657143C786.285714 188.914286 685.6 89.142857 561.485714 89.142857H223.314286c-17.257143 0-31.314286 14.057143-31.314286 31.314286v776.114286c0 18.628571 15.085714 33.714286 33.714286 33.714285h364.228571c133.714286 0 242.057143-107.657143 242.057143-240.571428v-12.571429c0-83.428571-42.742857-156.914286-107.657143-200.114286zM301.714286 198.857143h256.8c65.257143 0 118.057143 50.742857 118.057143 113.485714v10.857143c0 62.628571-52.914286 113.485714-118.057143 113.485714H301.714286V198.857143z m418.971428 490.742857c0 71.885714-59.085714 130.171429-132 130.171429H301.714286V547.085714h286.971428c72.914286 0 132 58.285714 132 130.171429v12.342857z" />
</svg>

And theApp.js file:

Import all SVG files

You can import all SVG files in the icons directory with require.context() .

You can create your own context with the require.context() function.

It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.

Webpack parses for require.context() in the code while building.

Modify theApp.js file.

Change icon color

If currentColor is used as the value of the color property, it instead takes its value from the inherited value of the color property.

The online demo is here.

The source code is here.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Join our community Discord.