🎷 saxicon
The saxicon module transforms SVGs into a SASS snippet that allows you to generate colorized SVGs (with both single or multi-colored shapes) within SASS, with each SVG embedded as a data-URI.
Saxicon is useful when you want to:
- Colorise your icon SVGs into a number of different colors, where these icons are embedded in your SCSS as a data-URI. For example, for theming support or reducing the overhead of manually editing icons to match changes to your styleguide.
- When you want to store your SVGs in CSS, and directly embedding them in your HTML is not applicable. For example, when working with a CMS.
Features
- Significantly faster than grunt-icon or plugins for inlining SVGs with PostCSS.
- Robust unit and visual tests
- Works with libsass and Dart Sass (replaces Ruby Sass)
Task runners:
Documentation
Quick start
const fs = ;const Saxicon = ; // Initialise a new Saxicon instanceconst sax = ; // Parse a single SVG filesax; // Parse multiple SVG filessax; // Parse a string as a SVG file sax; // Write SCSS to filefs;
Then in your SCSS:
; .icon1
Will compile to: