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

  •        14

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.

https://github.com/jkphl/gulp-svg-sprite

Dependencies:

plugin-error : ^1.0.1
svg-sprite : ^1.5.0
through2 : ^2.0.3

Tags
Implementation
License
Platform

   




Related Projects

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 caniuse.com.

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.

open-iconic - An open source icon set with 223 marks in SVG, webfont and raster formats

  •    CSS

We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the alt attribute). Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.

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.

gulp.spritesmith - Convert a set of images into a spritesheet and CSS variables via gulp

  •    Javascript

This is the official port of grunt-spritesmith, the grunt equivalent of a wrapper around spritesmith. Alternative output formats include SASS, Stylus, LESS, and JSON.


gulp-iconfont - Create icon fonts from several SVG icons

  •    Javascript

Create SVG/TTF/EOT/WOFF/WOFF2 fonts from several SVG icons with Gulp. You can test this library with the frontend generator.

gulp-svgstore - Combine svg files into one with symbol elements

  •    Javascript

Combine svg files into one with <symbol> elements. Read more about this in CSS Tricks article. If you need similar plugin for grunt, I encourage you to check grunt-svgstore.

css-sprite - css sprite generator

  •    Javascript

A css sprite generator. Generates sprites and proper css files out of a directory of images.

grunt-webfont - SVG to webfont converter for Grunt

  •    Javascript

Generate custom icon webfonts from SVG files via Grunt. Inspired by Font Custom. This task will make all you need to use font-face icon on your website: font in all needed formats, CSS/Sass/Less/Stylus and HTML demo page.

sprite.sh - 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.

SVGInjector - Fast, caching, dynamic inline SVG DOM injection library

  •    Javascript

A fast, caching, dynamic inline SVG DOM injection library. Developed by Waybury for use in iconic.js, part of the Iconic icon system. There are a number of ways to use SVG on a page (object, embed, iframe, img, CSS background-image) but to unlock the full potential of SVG, including full element-level CSS styling and evaluation of embedded JavaScript, the full SVG markup must be included directly in the DOM.

fontisto - The iconic font and CSS toolkit

  •    CSS

Fontisto is a full suite of 616+ pictographic icons for easy scalable vector graphics on websites, created and maintained by Kenan Gündoğan. Stay up to date with the latest release and announcements on Twitter: @fontisto. Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.

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.

sprity - A image sprite generator

  •    Javascript

A modular image sprite generator. Generates sprites and proper style files out of a directory of images.

simple-icons - SVG icons for popular brands

  •    HTML

Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be made on GitHub. Started by Dan Leech. Icons can be downloaded as SVGs directly from our website - simply click the icon you want, and the download should start automatically.

grunt-spritesmith - Grunt task for converting a set of images into a spritesheet and corresponding CSS variables

  •    Javascript

Grunt task for converting a set of images into a spritesheet and corresponding CSS variables. As of grunt-spritesmith@4.5.0, retina spritesheets/templates are supported. See the Retina parameters section for more information.

Hover - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on

  •    CSS

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS. Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to.

vivid - a JavaScript library which is built to easily customize and use the SVG Icons with a blaze.

  •    Javascript

Vivid.JS is an SVG Icons library which can be used to add highly customizable vibrant icons to the DOM without any dev dependencies. Vivid.JS is easy to adapt and can bring SVG icons to life using html5 data attributes on the go. Icons can also be individually customized in terms of colors and size using html5 data attributes which gives more power to Vivid.JS library.

iconizr - A PHP command line tool for converting SVG images to a set of CSS icons (SVG & PNG, single icons and / or CSS sprites) with support for image optimization and Sass output

  •    CSS

To leverage iconizr to the greatest extent possible, some additional tools have to be installed on the system independently (see below). iconizr is written in (namespaced) PHP and meant to be used on the (Linux) command line (i.e. with the PHP CLI SAPI). To be honest, there was only one reason making me go for PHP: It is what I know best. Im sure there are quite some other fancy modern languages and techniques one could use for achieving the same, but I guess I'm just not smart enough for those. Having said this, I'd welcome anyone contributing a port of iconizr.

sass-svg - Inline SVG for Sass.

  •    CSS

Inline SVG for Sass. This shows how you can use nesting and variables to create complex SVG shapes.