svg-colorize-loader
Webpack loader that allows you to change the colors of the SVG files used as background images using Sass variables. This is mostly applicable if you are doing a theme that supports colors customization.
Installation
npm install svg-colorize-loader
Usage
- Start with an SVG image with colors you would like to configure (for example, black or white).
- Add the loader as the first one before
url-loader
:
// ... test: /\.svg$/ use: loader: 'url-loader' loader: 'svg-colorize-loader' options: color1: '#000000' color2: '#FFFFFF' //...
- List the colors you want to change in the loader options
- In the Sass file, pass the actual colors as query string parameters to the file path. You can use Sass variables :
;; h1
Note: #
should be URL encoded, hence the encodecolor
function.
Example
See the example directory for a runnable version of the snippet above.