@meludi/sprite-it

Combines multiple named SVG files into one sprite.svg using <symbol>.

Based on svgstore.

Install

$ npm i -D @meludi/sprite-it

Prepare

Add the following file to your project root: .sprite-it.js:

module.exports = {
  /**
   * Default setup
   *
   */
  setup: {
    inputDir: 'example/icons', // Path to your svg icons folder
    outputDir: 'dist/public', // sprite.svg will be generated in this folder
    spriteName: 'sprite.svg', // Name of your generated sprite.svg
  },

  /**
   * Default presets
   *
   * Check out
   * {@link https://github.com/svg/svgo SVGO} and
   * {@link https://github.com/svg/svgo#default-preset SVGO default-preset}.
   */
  presets: {
    minifyStyles: true,
    removeUselessDefs: true,
    removeNonInheritableGroupAttrs: true,
    removeTitle: true,
    cleanupAttrs: true,
    removeMetadata: true,
    removeDoctype: true,
    removeXMLProcInst: true,
    collapseGroups: true,
  },
};

It is also recommended to add the following script to your package.json for easy usage:

"scripts": {
  "sprite-it": "sprite-it"
}

Usage

Run it

$ npm run sprite-it

Use it

<svg role="img">
  <use xlink:href="/outputDir/sprite.svg#name-of-your-svg-icon"></use>
</svg>

Example

Implementation code of sprite-it

CLI

Use --record or -r to map and compare generated icons. The mapping is saved to the file .sprite-it.manifest.json.

Use --manifest your-manifest-file.json or -m your-manifest-file.json to override the default file name .sprite-it.manifest.json.

More options

$ npm run sprite-it -- --help

LICENSE

MIT