Natural Pleistocene Monsters
    Have ideas to improve npm?Join in the discussion! »

    @svgr/webpack

    5.5.0 • Public • Published

    @svgr/webpack

    Build Status Version MIT License

    Webpack loader for SVGR.

    npm install @svgr/webpack --save-dev
    

    Usage

    In your webpack.config.js:

    {
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    }

    In your code:

    import Star from './star.svg'
     
    const App = () => (
      <div>
        <Star />
      </div>
    )

    Passing options

    {
      test: /\.svg$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            native: true,
          },
        },
      ],
    }

    Using with url-loader or file-loader

    It is possible to use it with url-loader or file-loader.

    In your webpack.config.js:

    {
      test: /\.svg$/,
      use: ['@svgr/webpack', 'url-loader'],
    }

    In your code:

    import starUrl, { ReactComponent as Star } from './star.svg'
     
    const App = () => (
      <div>
        <img src={starUrl} alt="star" />
        <Star />
      </div>
    )

    The named export defaults to ReactComponent, but can be customized with the namedExport option.

    Use your own Babel configuration

    By default, @svgr/webpack includes a babel-loader with an optimized configuration. In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying babel: false in options.

    // Example using preact
    {
      test: /\.svg$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['preact', 'env'],
          },
        },
        {
          loader: '@svgr/webpack',
          options: { babel: false },
        }
      ],
    }

    Handle SVG in CSS, Sass or Less

    It is possible to detect the module that requires your SVG using Rule.issuer in Webpack. Using it you can specify two different configurations for JavaScript and the rest of your files.

    [
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        issuer: {
          test: /\.jsx?$/
        },
        use: ['babel-loader', '@svgr/webpack', 'url-loader']
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader'
      },
    ]

    License

    MIT

    Install

    npm i @svgr/webpack

    DownloadsWeekly Downloads

    4,123,957

    Version

    5.5.0

    License

    MIT

    Unpacked Size

    14 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar