@svgr/webpack
Webpack loader for SVGR.
npm install @svgr/webpack --save-dev
Usage
In your webpack.config.js:
test: /\.svg$/ use: '@svgr/webpack'In your code:
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:
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?$/ issuer: test: /\.jsx?$/ use: 'babel-loader' '@svgr/webpack' 'url-loader' test: /\.svg?$/ loader: 'url-loader' License
MIT