svg-icon-template-loader

Svg icon template loader module for webpack

Usage no npm install needed!

<script type="module">
  import svgIconTemplateLoader from 'https://cdn.skypack.dev/svg-icon-template-loader';
</script>

README

SVG Icon Template Loader

Turns your SVG icons into functions that allow you to specify overrides for common SVG attributes such as root element, fill, stroke and stroke width.

NPM version Build Status Dependency Status

Installation

npm install --save-dev svg-icon-template-loader

Usage

import iconClose from 'svg-icon-template-loader!./close.svg';
// => returns the SVG as a function that takes an options object containing overrides such as root element, fill, stroke and stroke width.

iconClose({ rootElement: 'symbol', stroke: '#ff0000', strokeWidth: 4 });
// {
//   data: '<symbol viewBox="-1 -1 10 10" xmlns="http://www.w3.org/2000/svg"><g stroke="#ff0000" stroke-width="4" fill="none" fill-rule="evenodd"><path d="M.7 7.3L7.3.7M7.3 7.3L.7.7"/></g></symbol>',
//   originalInfo: { minX: 0, minY: 0, width: 8, height: 8, modeStrokeWidth: 2 },
//   info: { minX: -1, minY: -1, width: 10, height: 10 }
// }

Note: If you've already defined loaders for SVG files in the configuration, you can override the loader order by writing !!svg-icon-template-loader!./close.svg to disable all loaders specified in the configuration for that module request.

Supported overrides:

  • rootElement
  • fill
  • stroke
  • strokeWidth

Options

You can pass options to the loader via query parameters.

svgo

import iconClose from 'svg-icon-template-loader?svgo=false!./close.svg';
// default is true

svgoConfig

const svgoConfig = JSON.stringify({
  plugins: [
    { removeTitle: true },
    { removeDimensions: true },
    { convertColors: { shorthex: true } },
  ],
})

import iconClose from `svg-icon-template-loader?svgoConfig=${ svgoConfig }!./close.svg`;

License

This open source project released by Nordnet is licensed under the MIT license.