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.
- 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)
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 filesax;// Write SCSS to filefs;
Then in your SCSS:
Will compile to: