Nylon Pendulum Movement

    vite-plugin-react-svg
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/vite-plugin-react-svg package

    0.2.0 • Public • Published

    vite-plugin-react-svg

    Extend Vite with ability to use SVG files as React components.

    Features:

    • SVGO optimization
    • SVGR customization
    • Hot Module Replacement support
    • Support for ?url and ?component query string

    Currently supported Vite version:

    2.0.0-beta.61

    Install

    yarn add --dev vite-plugin-react-svg
    
    npm i -D vite-plugin-react-svg

    Setup

    // vite.config.js
    const reactRefresh = require('@vitejs/plugin-react-refresh');
    const reactSvgPlugin = require('vite-plugin-react-svg');
    
    module.exports = {
      plugins: [
        reactRefresh(),
        reactSvgPlugin(),
      ],
    };

    Options

    reactSvgPlugin({
      // Default behavior when importing `.svg` files, possible options are: 'url' and `component`
      defaultExport: 'url',
    
      // Boolean flag to enable/disable SVGO
      svgo: true,
    
      // SVGO configuration object
      svgoConfig: {},
    
      // Props to be forwarded on SVG tag, ossible options: "start", "end" or false
      expandProps: 'end',
    
      // Setting this to true will forward ref to the root SVG tag
      ref: false,
    
      // Setting this to true will wrap the exported component in React.memo
      memo: false,
    
      // Replace an attribute value by an other.
      // The main usage of this option is to change an icon color to "currentColor" in order to inherit from text color.
      // replaceAttrValues: { old: 'new' },
      replaceAttrValues: null,
    
      // Add props to the root SVG tag
      // svgProps: { name: 'value' },
      svgProps: null,
    
      // Add title tag via title property
      // <SvgIcon title="Accessible icon name" /> => <svg><title>Accessible icon name</title><...></svg>
      // <SvgIcon title="Accessible icon name" titleId="iconName" /> => <svg aria-labelledby="iconName><title id="iconName">Accessible icon name</title><...></svg>
      titleProp: false,
    })

    Usage

    import MyIcon from './svgs/my-icon.svg?component';
    
    function App() {
      return (
        <div>
          <MyIcon />
        </div>
      );
    }

    Install

    npm i vite-plugin-react-svg

    DownloadsWeekly Downloads

    11,057

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    5.75 kB

    Total Files

    5

    Last publish

    Collaborators

    • visualfanatic