vite-plugin-svgr-component
    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: [
        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 🎺🎵

    Install

    npm i vite-plugin-svgr-component

    DownloadsWeekly Downloads

    170

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    15.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • chempogonzalez