Creating SVG React Component with a single terminal command

Generate from an URL

1. First you need to find an SVG on the internet
(I suggest SVGRepo for finding open-source SVGs)

2. Then right-click and “Copy Image Address”

3. Then you just need to paste the url into this command

curl "https://www.svgrepo.com/show/414849/education-library-metting.svg" \
| npx @svgr/cli \
| code -&

4. This should open up into a temporary file inside of VS Code
Once the generation is completed, it will create the SVG component right there in the editor

5. Done! 🎉

Generate from a file

1. Since we already have the file we don’t need to curl to grab it, and instead we can use cat to output the files contents directly to stdout

cat temp.svg | npx @svgr/cli | code -&

1. This should open up into a temporary file inside of VS Code
Once the generation is completed, it will create the SVG component right there in the editor

2. Done! 🎉