svg-sprite-generation-loader

svg-sprite-generation-loader

Webpack plugin and loader for generating svg sprites

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.Plugin({
      spriteFilePath: `path/to/sprite/file.svg`,
    }),
  ],
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: "svg-sprite-generation-loader",
      },
    ],
  },
};

In some source code:

import someIcon from 'path/to/iconFileName.svg'

export default function SomeIcon() {
  return (
    <svg {...someIcon}>
      <use href="path/to/sprite/file.svg#iconFileName">
    </svg>
  );
}