webpack loader to transform svg css modules
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
.npmignore
README.md
package.json
yarn.lock

README.md

svg-css-modules-loader

Webpack loader to transform svg css modules.

NPM

JavaScript Style Guide

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 */
<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>

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