0xradical / svg-globaldefs-webpack-plugin

Turns svg symbol-level defs into global defs

SVG Global defs Webpack Plugin

This webpack plugin reformats SVG files to pull all inner <symbol>-bound graphical objects and put them into a global <defs> tag. Per MDN documentation, <defs> tag is used to store graphical objects that can be referenced later (with an <use> tag, for example). They are not supposed to be rendered directly if they're inside <defs>. Ideally, all later-referenced graphical objects should be stored that way (it keeps your svg organized and saves memory, since many symbols may reference the same object). However, browsers for the most part render svgs correctly even if there's no such organization effort. Unfortunately, that's not the case for Firefox. This plugin mostly remedies this issue.

Compatibility
This plugin is currently only compatible with webpack ^5.0.0.

Installation

npm install svg-globaldefs-webpack-plugin --save-dev

Usage

Webpack configuration

const path = require('path');
const SVGGlobalDefsWebpackPlugin = require('svg-globaldefs-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new SVGGlobalDefsWebpackPlugin({
      files: [ 
        path.resolve(__dirname, 'svgs/icons/*.svg'), 
        path.resolve(__dirname, 'svgs/sprite.svg')
      ],
      options: {
        attributes: ['linearGradient', 'mask', 'clipPath']
      }      
    })
  ]
}

Testing

npm test

License

This project is licensed under the MIT license.