TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    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: [
    /* React component file */
    import CustomIcon from 'custom-icon.svg';
    const Component = (props) => (
        <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"/>

    🛠️ 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: [
          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 🎺🎵


    npm i vite-plugin-svgr-component

    DownloadsWeekly Downloads






    Unpacked Size

    15.4 kB

    Total Files


    Last publish


    • chempogonzalez