https://github.com/kevin940726/svg-css-modules-loader
webpack loader to transform svg css modules
https://github.com/kevin940726/svg-css-modules-loader
css-modules svg webpack-loader
Last synced: 10 months ago
JSON representation
webpack loader to transform svg css modules
- Host: GitHub
- URL: https://github.com/kevin940726/svg-css-modules-loader
- Owner: kevin940726
- Created: 2016-08-20T17:14:57.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-30T12:03:28.000Z (over 8 years ago)
- Last Synced: 2025-03-24T17:21:16.363Z (10 months ago)
- Topics: css-modules, svg, webpack-loader
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/svg-css-modules-loader
- Size: 62.5 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svg-css-modules-loader
Webpack loader to transform svg css modules.
[](https://nodei.co/npm/svg-css-modules-loader/)
[](https://github.com/feross/standard)
## 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**
```html
/* from ... */
/* file.svg */
.class {
fill: #fff;
}
/* ... to */
.file__class___DhpID {
fill: #fff;
}
```
## Installation
```bash
$ 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](https://github.com/jhamlet/svg-react-loader) or other loader like below.
```js
loaders: [
//... other loaders
{
test: /\.svg$/,
loader: 'svg-react!svg-css-modules?transformId'
},
//... other loaders
]
```
It's also highly recommended to include [svgo](https://github.com/svg/svgo) in your loaders by using [svgo-loader](https://github.com/rpominov/svgo-loader) or [image-webpack-loader](https://github.com/tcoopman/image-webpack-loader)
```js
loader: 'svg-react!svgo!svg-css-modules'
```
## Options
#### `localIdentName`: string
What indent name should loader transform to, more info [here](https://github.com/webpack/loader-utils#interpolatename). Default to `[name]__[local]___[hash:base64:5]`.
#### `transformId`: boolean
Whether to enable id transformation. default to false.
## Author
Kai Hao
## License
MIT