React Component with vite-plugin-svg-icons

This article provides a way to make a react component using vite-plugin-svg-icons as a loader to handle svg icons with your application 🧨.

Create new project using react & vite and then,

Install vite-plugin-svg-icons

npm i vite-plugin-svg-icons

or

yarn add vite-plugin-svg-icons

After install we should add configuration to vite.config.ts

and then add this to main.ts file. (import “virtual:svg-icons-register”;)

Make a component (SvgIcon.tsx) to get icon by name.

And then you can use the component as expected,

Demo: https://gratis-island.surge.sh/

Github Respository: https://github.com/ahmedShawareb567/react-svg-icon

Linked In: https://www.linkedin.com/in/ahmed-shawareb-b4b39119a/