webpack loader to transform svg css modules
Webpack loader to transform svg css modules.
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 */
<svg>
<defs><style>
.class {
fill: #fff;
}
</style></defs>
<path class="class" />
</svg>
/* ... to */
<svg>
<defs><style>
.file__class___DhpID {
fill: #fff;
}
</style></defs>
<path class="file__class___DhpID" />
</svg>
$ yarn add -D svg-css-modules-loader
$ npm install --save-dev svg-css-modules-loader
(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'
localIdentName
: stringWhat indent name should loader transform to, more info here. Default to [name]__[local]___[hash:base64:5]
.
transformId
: booleanWhether to enable id transformation. default to false.
Kai Hao
MIT