Nuclear Pumpkin Mocha

    svg-css-modules-loader

    1.6.1 • Public • Published

    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

    Install

    npm i svg-css-modules-loader

    DownloadsWeekly Downloads

    315

    Version

    1.6.1

    License

    MIT

    Last publish

    Collaborators

    • kevin940726