# svg-css-modules-loader

> webpack loader to transform svg css modules

Latest version **1.6.1** (published 2017-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install svg-css-modules-loader
pnpm add svg-css-modules-loader
yarn add svg-css-modules-loader
bun add svg-css-modules-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.1 |
| Published | 2017-04-30 |
| First published | 2016-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Kai Hao |
| Maintainers | kevin940726 |
| Keywords | webpack, loader, svg, css-modules |

## Links

- npm: https://www.npmjs.com/package/svg-css-modules-loader
- Repository: https://github.com/kevin940726/svg-css-modules-loader
- Homepage: https://github.com/kevin940726/svg-css-modules-loader#readme
- Issues: https://github.com/kevin940726/svg-css-modules-loader/issues
- npm.io page: https://npm.io/package/svg-css-modules-loader

## Dependencies (5)

- [cheerio](https://npm.io/package/cheerio.md) ^0.20.0
- [postcss](https://npm.io/package/postcss.md) ^5.1.2
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
- [generic-names](https://npm.io/package/generic-names.md) ^1.0.1
- [postcss-modules](https://npm.io/package/postcss-modules.md) ^0.5.2

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.6.1 (latest) — 2017-04-30
- 1.6.0 — 2017-04-30
- 1.5.0 — 2017-04-27
- 1.4.0 — 2017-04-21
- 1.3.0 — 2016-08-28
- 1.2.1 — 2016-08-27
- 1.2.0 — 2016-08-23
- 1.1.2 — 2016-08-21
- 1.1.1 — 2016-08-21
- 1.1.0 — 2016-08-21
- 1.0.3 — 2016-08-21
- 1.0.2 — 2016-08-21
- 1.0.1 — 2016-08-21
- 1.0.0 — 2016-08-21

## README

# svg-css-modules-loader
Webpack loader to transform svg css modules.

[![NPM](https://nodei.co/npm/svg-css-modules-loader.png?downloads=true&stars=true)](https://nodei.co/npm/svg-css-modules-loader/)

[![JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](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 */
<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
```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

---
_Source: https://npm.io/package/svg-css-modules-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._