vite-plugin-svgr-component

Vite svgr component plugin

Vite zero-config customizable plugin to import SVG and transform it to a React component in a simple way.

🚀 Features

• 👌 Zero-config: built-in default configs for common use cases
• ✅ Easy import: Not aditional ?component string needed
• ⚒️ Configurable: full ability to customize the behavior of the plugin
• ⚛️ Transformed with SVGR: svgr library based to transform the svg to a React Component
• ⚡ Optimized SVG: Optimized with SVGO plugin
• 🔑 Fully typed: written in Typescript and extends SVGR options with types

📦 Install

# NPM install as a devDepencency npm i vite-plugin-svgr-component -D # YARN install as a devDependency yarn add vite-plugin-svgr-component -D

💻 Usage

Add svgrComponent plugin to vite.config.js / vite.config.ts and use it:

By default it will transform all the *.svg files imported to a React component

/* vite.config.js / vite.config.ts */ import { svgrComponent } from 'vite-plugin-svgr-component'; export default { // ... plugins: [ svgrComponent() ] } /*---------------------------------------------------------*/ /* React component file */ import CustomIcon from 'custom-icon.svg'; const Component = (props) => ( <div> <CustomIcon /> {/* You can add a title by default */} <CustomIcon title="custom svg title" /> {/* Accesibility (A11y) title props linked to titleId prop */} <CustomIcon title="custom svg title" titleId="custom-icon"/> </div> )

🛠️ Config

Change import pattern to be transformed

As it uses micromatch under the hood, you can set a string pattern to transform specific svg file imports

/* vite.config file */ export default { // ... plugins: [ // Example: import HomeIcon from 'home-icon-embedded.svg' svgrComponent({ importStringPattern: '*-embedded.svg' }) ] }

Change SVGR options

As it uses svgr under the hood, you can set all the available options to generate the react component. Here you have an example:

/* vite.config file */ export default { // ... plugins: [ svgrComponent({ svgrOptions: { ref: true, // Forward the ref to the root SVG tag. icon: true, // Replace SVG width and height with // 1em to make SVG inherit text size. /* ... */ } }) ] }

Use with Typescript

If you use the plugin in a Typescript project you will need the reference to the type definitions to allow to use "title" and "titleId" in your SVGComponent

/* vite-env.d.ts (file) */ /// <reference types="vite-plugin-svgr-component/client" />

🔑 Full config

Check out the type declaration src/index.ts with all the related types

Created with Typescript! ⚡ and latin music 🎺🎵