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