svg-sprite-generation-loader

2.1.2 • Public • Published

svg-sprite-generation-loader

npm version GitHub license

Webpack loader for generating external svg symbol sprite files

Table of contents

How it works?

svg-sprite-generation-loader is a webpack-loader that takes a multiple svg files, optimize them (using svgo.optimize), transform (parse and return as an object with symbolId, attributes and content (disabled by default) keys) and put them back in one file.

Input multiple svg files, e.g:

<!-- file1.svg -->
<svg viewBox="0 0 10 10">
  <!-- file1.svg content -->
</svg>

<!-- file2.svg -->
<svg viewBox="0 0 10 30">
  <!-- file2.svg content -->
</svg>

<!-- file3.svg -->
<svg viewBox="0 0 15 40">
  <!-- file3.svg content -->
</svg>

Output one svg file (svg sprite):

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol viewBox="0 0 10 10" id="file1">
    <!-- file1.svg content -->
  </symbol>

  <symbol viewBox="0 0 10 30" id="file2">
    <!-- file1.svg content -->
  </symbol>

  <symbol viewBox="0 0 15 40" id="file3">
    <!-- file3.svg content -->
  </symbol>
</svg>

You can refer to this file to display all your icons using SVG stacking technique

Installation:

npm install svg-sprite-generation-loader --save-dev

yarn

yarn add svg-sprite-generation-loader --dev

Usage:

In your webpack config:

const SvgSpriteGenerationPlugin = require('svg-sprite-generation-loader/plugin.js');

module.exports = {
  plugins: [new SvgSpriteGenerationPlugin()],
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: 'svg-sprite-generation-loader',
      },
    ],
  },
};

In some source code:

import iconData from 'path/to/some/icon-file-name.svg';

// by default iconData will include symbolId and attributes keys.
// If you enable the addContent loader option, the `content` key will also be added

<svg {...iconData.attributes}>
  <use href={`path/to/sprite/filename.svg#${iconData.symbolId}`} />
</svg>;

Options

Name Type Default value Description
symbolId string | function "[name]" Sprite item (single icon) <symbol> id attribute value.
string or function that takes the file path of the original icon as an argument and returns string.

You can use interpolateName patterns.
Default value ("[name]") is equal to icon filename (without extension). For example, by default symbolId for file1.svg file will be file1
spriteFilePath string sprite.svg Path to sprite file.
webpack.output.path is included
svgoOptimize boolean | object true Enable/Disable/Customize source svg file optimization with svgo.optimize. The following options are used by default:
{
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
        },
      },
    },
    'removeXMLNS',
  ],
}
You can disable it completely (by passing false) or use your own configuration (see svgo docs)
addContent boolean false Add svg content as property to transformed svg object (may increase bundle size when enabled)

Package Sidebar

Install

npm i svg-sprite-generation-loader

Weekly Downloads

882

Version

2.1.2

License

MIT

Unpacked Size

27.1 kB

Total Files

24

Last publish

Collaborators

  • vadymshymko