Exciting release!Introducing "safe npm". Learn more
Log inDemoInstall


Package Overview
File Explorer

Advanced tools


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


Version published
Weekly downloads
increased by8.46%

Weekly downloads



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 🎺🎵



Last updated on 02 Jun 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
support@socket.devSocket SOC 2 Logo


  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc