Webpack loader to add/modify tags and attributes in SVG image. Main purpose - fill, stroke and other manipulations with image imported from CSS/SCSS/LESS/Stylus/PostCSS.
- Webpack config
- Further SVG handling
- How to pass transform parameters
- ⚠Important notices
Fill image with white color:
Stroke image by using variable in SCSS:
When used with postcss-move-props-to-bg-image-query it is possible to specify transform parameters as usual CSS declarations:
npm install svg-transform-loader
It's safe to pass all SVGs through this loader, if no transform params presented it just returns original source.
Transform parameters are passed via query string, so match rule for svg files should consider this:
moduleexports =module:rules:test: /\.svg?$/ // match img.svg and img.svg?param=valueuse:'url-loader' // or file-loader or svg-url-loader'svg-transform-loader'
Further SVG handling
Don't forget that this loader leaves any further SVG processing to your choice. You can use:
- url-loader/svg-url-loader to inline the SVG into CSS.
- file-loader to save SVG as a file (read the notice).
How to pass transform parameters
Transform parameter has following syntax:
Multiple values can be specified by separating them with comma:
fill=red .path1, blue .path2.
Parameters can be combined:
/* Fill all <path/> tags *//* Fill all <path/> tags, stroke element with id="qwe" */
It is possible to write parameters as usual style declarations in CSS and this plugin will turn them into background image query params:
/* turns into */
For more info read plugin docs.
By default loader returns transformed image as-is, which is convenient for further
processing with file-loader (e.g. to create a separate file), or
url-loader/svg-url-loader (to inline it in CSS code). However, sometimes you
might need to get the image as a module (like, for rendering with React). In this
case, you'll need to set
⚠ Important notices
Usage with css-loader
Note that when using css-loader to handle CSS, sharp
# symbol in image query
params should be encoded, because css-loader will treat it as
fragment identifier part of URL:
/* will be treated as */
To work around this you have several options.
- Recommended: use PostCSS plugin postcss-move-props-to-bg-image-query. See more details in corresponding section.
- Use special loader to encode sharp in CSS imports. svg-transform-loader comes
with special loader which can be used to encode sharp in CSS imports. This
loader should be defined before css-loader and after any other style
loaders (webpack call loaders from right to left). Please note that css-loader
importLoadersoption should be set to
1or higher:Encode loader uses PostCSS under the hood, so if you already have it on the project it's better to use postcss-move-props-to-bg-image-query to avoid double parsing and performance downgrade.// webpack.config.jsmoduleexports =module:rules:test: /\.svg?$/use:'url-loader''svg-transform-loader'test: /\.scss$/use:loader: 'css-loader'options:importLoaders: 1 // This option should be set to work with encode-query loader'svg-transform-loader/encode-query' // loader should be defined BEFORE css-loader'sass-loader' // but AFTER any other loaders which produces CSS
- Encode sharp manually. Replace
%23directly in import:
- Use preprocessor mixin. If style preprocessor is used, sharp encoding can be
automated via mixin. Example of SCSS mixin:/* and use it like this */;.img
Usage with resolve-url-loader
If you're using resolve-url-loader for rewriting paths in SCSS/LESS/etc, keep in
mind that it will remove query string by default and svg-transform-loader will
not be able to handle the image. To fix this set
test: /\.scss$/use:'css-loader'loader: 'resolve-url-loader'options:keepQuery: true // <- this!'sass-loader'
Usage with file-loader
Keep in mind that you should use
[hash] token in file-loader name option,
otherwise webpack will create only 1 file per SVG image.