svg-css-modules-loader
Webpack loader to transform svg css modules.
Motivation
Inline svg is awesome, it let you control your svg with css on the fly. Using a loader like svg-react-loader
let you quickly import your svg as inline React component. But what happen if your svg file has some css style in it? This is a very common thing when you are exporting svg from sketch or other application. Now importing multiple svg files will cause some class name collision issues, and it is a pain in the ass. So, css modules to the rescue.
tl;dr
/* from ... *//* file.svg */ /* ... to */
Installation
$ yarn add -D svg-css-modules-loader$ npm install --save-dev svg-css-modules-loader
Usage
(webpack 1)
Load the loader before the svg-react-loader or other loader like below.
loaders: //... other loaders test: /\.svg$/ loader: 'svg-react!svg-css-modules?transformId' //... other loaders
It's also highly recommended to include svgo in your loaders by using svgo-loader or image-webpack-loader
loader: 'svg-react!svgo!svg-css-modules'
Options
localIdentName
: string
What indent name should loader transform to, more info here. Default to [name]__[local]___[hash:base64:5]
.
transformId
: boolean
Whether to enable id transformation. default to false.
Author
Kai Hao
License
MIT