Skip to main content

SVGR

SVGR transforms SVG into ready to use components.
Refer to official documentation for detailed usage. →

Run the following command to produce components from SVG's.

npm run svgr

This will transform SVG's at public/icons to .tsx components, puts them in src/components/icons ignoring existing ones.

caution

After adding new SVG icons, you must run the following command again to produce components for newly added SVG's.

npm run svgr

Refer to official documentation for detailed usage. →

Adding SVGR to your project later#

tip

All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose SVGR plugin during the project creation phase.

If you didn't choose the SVGR plugin during project creation phase, you can follow the instructions below to add it. 

npm install -D @svgr/cli

Add command to scripts

package.json
{    scripts: {        "svgr": "npx @svgr/cli -d src/components/icons --ignore-existing --icon --typescript public/icons"    }}

Then run the following command

npm run svgr

Refer to official documentation for detailed usage →