svg-spritemap-webpack-plugin - SVG spritemap plugin for webpack

  •        343

This webpack plugin generates a single SVG spritemap containing multiple elements from all .svg files in a directory. In addition, it can optimize the output and can also generate a stylesheet containing the sprites to be used directly from CSS. Chris Coyier has a good write-up about the why's and how's of this technique on CSS Tricks. Use it in combination with the svg4everybody package to easily and correctly load SVGs from the spritemap in all browsers. Compatibility Version ^2.0.0 of this plugin is compatible with webpack ^4.0.0. When using an older version of webpack, make sure to install the ^1.0.0 (svg-spritemap-webpack-plugin@^1.0.0) release of this plugin.


get-value : ^3.0.1
glob : ^7.1.2
html4-id : ^1.0.0
is-plain-object : ^2.0.4
loader-utils : ^1.1.0
mini-svg-data-uri : ^1.0.0
svg4everybody : ^2.1.9
svgo : ^1.0.5
webpack-merge : ^4.1.2
webpack-sources : ^1.1.0
xmldom : ^0.1.27



Related Projects

svg-sprite-loader - Webpack loader for creating SVG sprites.

  •    Javascript

Webpack loader for creating SVG sprites. πŸŽ‰ 2.0 is out, please read the migration guide & overview.

gulp-svg-sprite - SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

  •    Javascript

This document covers only gulp specific installation and configuration aspects. For a full list of features and options, please see the svg-sprite manual. NOTICE: By default, svg-sprite doesn't send any files downstream unless you configure it. There are tons of options available — please see below for some basic examples. Also, you should possibly take care of errors that might occur.

svg-sprite - SVG sprites & stacks galore — A low-level Node

  •    Javascript

It comes with a set of Mustache templates for creating stylesheets in good ol' CSS or one of the major pre-processor formats (Sass, Less and Stylus). Tweaking the templates or even adding your own custom output format is really easy, just as switching on the generation of an HTML example document along with your sprite. For an up-to-date list of browsers supporting SVG in general respectively SVG fragment identifiers in particular (required for <defs> and <symbol> sprites as well as SVG stacks) please refer to

svg4everybody - Use external SVG spritemaps today

  •    Javascript

SVG for Everybody adds SVG External Content support to all browsers. To use it now, include the script in your document.

svg-react-loader - Webpack SVG to React Component Loader

  •    Javascript

A webpack loader allowing for inline usage of a SVG as a React component, or for composing individual SVGs into larger ones. The latest version has been refactored to allow for receiving an SVG/XML string or an JSON object-tree representing an SVG. This allows for other loaders before svg-react to alter/update/remove nodes before reaching svg-react.

svg-inline-loader - Inline SVG loader with cleaning-up functionality

  •    Javascript

This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too. Simply add configuration object to module.loaders like this.

gulp-svg-sprites - Create SVG sprites or compile to <symbols>

  •    Javascript

Install it locally to your project. Windows note: Using Version < 4.0.0, make sure you also have all prerequisites for node-gyp.

vue-unicons - 1000+ Pixel-perfect svg icons for your next project as Vue components

  •    Vue

A simple way to add the necessary icons and install them. Installing with npm is recommended and it works seamlessly with webpack.

svg-icon-system-boilerplate - A boilerplate for building a custom icon system via a linked external SVG sprite

  •    HTML

A boilerplate for building a custom icon system via a linked external SVG sprite. Configuration Options -- this system is based on SVG-sprite. sprite.svg is the main file containing a sprite of each SVG included using <symbol> inside of SVG <defs>. This system implements SVG icons via to access individual icons.

favicons-webpack-plugin - Let webpack generate all your favicons and icons for you

  •    Javascript

This basic configuration will generate 37 different icons for iOS devices, Android devices and the Desktop browser out of your my-logo.png file. It can optionally also generate a JSON file with all information about the icons for you. Take a look at the

preload-webpack-plugin - A webpack plugin for injecting <link rel='preload|prefecth'> into HtmlWebpackPlugin pages, with async chunk support

  •    Javascript

A Webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using <link rel='preload'>. This helps with lazy-loading. Note: This is an extension plugin for html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

grunticon - A mystical CSS icon solution.

  •    HTML

grunticon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike. From a CSS perspective, it's easy to use, as it generates a class referencing each icon, and doesn't use CSS sprites. grunticon takes a folder of SVG/PNG files (typically, icons that you've drawn in an application like Adobe Illustrator), and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated and placed in a folder. - A Bash script to build a SVG sprite from a folder of SVG files (typically icons).

  •    Javascript

A Node.js script to build a SVG sprite from a folder of SVG files (typically icons). Or you know, you can also just copy the script.

html-webpack-plugin - Simplifies creation of HTML files to serve your webpack bundles

  •    Javascript

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader. The html-webpack-plugin works without configuration. It's a great addition to the βš™οΈ webpack-config-plugins.


  •    Javascript

HardSourceWebpackPlugin is a plugin for webpack to provide an intermediate caching step for modules. In order to see results, you'll need to run webpack twice with this plugin: the first build will take the normal amount of time. The second build will be signficantly faster. Install with npm install --save hard-source-webpack-plugin or yarn. And include the plugin in your webpack's plugins configuration.

html-webpack-template - a better default template for html-webpack-plugin

  •    HTML

This is a template for the webpack plugin html-webpack-plugin. It has a few extra features more than the default template which will hopefully make it less likely that you'll have to create your own index.html file in your webpack project. Templates for the html-webpack-plugin are implemented using underscore templates (previously, in 2.x, blueimp templates). You can write your own as well.