@svgr/webpack
SVGR webpack loader.
Last updated 6 days ago by neoziro .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install @svgr/webpack 
SYNC missed versions from official npm registry.

@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>
)

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

Current Tags

  • 2.0.0-alpha.26fa501a                                ...           canary (2 years ago)
  • 5.1.0                                ...           latest (6 days ago)

25 Versions

  • 5.1.0                                ...           6 days ago
  • 5.0.1                                ...           a month ago
  • 5.0.0                                ...           a month ago
  • 4.3.3                                ...           4 months ago
  • 4.3.2                                ...           6 months ago
  • 4.3.1                                ...           7 months ago
  • 4.3.0                                ...           8 months ago
  • 4.2.0                                ...           10 months ago
  • 4.1.0                                ...           a year ago
  • 4.0.4                                ...           a year ago
  • 4.0.3                                ...           a year ago
  • 4.0.2                                ...           a year ago
  • 4.0.1                                ...           a year ago
  • 4.0.0                                ...           a year ago
  • 3.1.0                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 2.4.1                                ...           a year ago
  • 2.4.0                                ...           a year ago
  • 2.3.0                                ...           a year ago
  • 2.2.1                                ...           a year ago
  • 2.2.0                                ...           a year ago
  • 2.1.1                                ...           2 years ago
  • 2.1.0                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 2.0.0-alpha.26fa501a                                ...           2 years ago
Maintainers (1)
Downloads
Today 248
This Week 4,144
This Month 35,190
Last Day 235
Last Week 12,287
Last Month 58,506
Dev Dependencies (4)
Dependents (1948)

Copyright 2014 - 2017 © taobao.org |