Neanderthals Programming Machines

npm

npm’s 2019 JavaScript ecosystem survey analysis is now available! Get your copy here »

saxicon

1.2.0 • Public • Published

🎷 saxicon

npm version License Build Status

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:

  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:

Documentation

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,...");
}

install

npm i saxicon

Downloadsweekly downloads

28

version

1.2.0

license

BSD-3-Clause

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability