🎷 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.

Deprecation warning: This module is no longer maintained and will not receive any further security updates or fixes.

Saxicon is useful when you want to:

1. 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.
2. 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:

• grunt-saxicon

Documentation

• Documentation
• Issue Tracking

Quick start

const fs = require('fs');
const { Saxicon } = require('saxicon');

// Initialise a new Saxicon instance
const sax = new Saxicon();

// Parse a single SVG file
sax.parseSync('path/to/icon1.svg');

// Parse multiple SVG files
sax.parseSync([
    'path/to/icon2.svg',
    'path/to/icon3.svg',
]);

// Parse a string as a SVG file 
sax.parseString(someMarkup);

// Write SCSS to file
fs.writeFile('saxicon.scss', sax.scss(), (err) => {
    if (err) {
        throw new Error(err);
    }
});

Then in your SCSS:

@import 'saxicon';

.icon1 {
    background-image: sax(icon1, #F00);
}

Will compile to:

.icon1 {
    background-image: url("data:image/svg+xml,...");
}