SCSS

This documentation concerns SCSS the output of the SaxiconData.scss() method, and how to use it to embed SVGs within your stylesheets.

• Mixins
  • sax
  • sax-width & sax-height
  • sax-classes
• Usage
  • Single color SVGs
  • Multi-color SVGs
  • Troubleshooting
• Examples

Mixins

sax ( $icon , $keywords... )

• $icon ([String][sass-string]): Icon name
• $keywords... Color replacements, see below

Returns the specified icon, either in a single color or in multiple colors, as a data-URI. Colors are converted to a six-digit hex string (alpha is not included). Raises an error if the icon does not exist.

To replace a single color:

.arrow {
    background-image: sax(arrow, #000);
}

To replace with multiple-colors:

.arrow {
    background-image: sax(arrow, $red: #d700ee, $blue: #9600bb);
}

To replace with some colors and an optional default:

.arrow {
    background-image: sax(arrow, #000, $red: #d700ee);
}

sax-width ($icon) sax-height ($icon)

• $icon ([String][sass-string]): Icon name

Returns the icon's width or height in pixels, as defined by the SVG's width and height attributes (or the viewBox attribute). This isn't guaranteed to be a whole-number if the SVG uses fractional dimensions. Raises an error if the icon does not exist.

.arrow {
    background-size: sax-width(arrow) sax-height(arrow);
    width: sax-width(arrow);
    height: sax-height(arrow);
}

.arrow {
    background-size: 9px 12px;
    width: 9px;
    height: 12px;
}

sax-classes ($color, $prefix)

• $color (Color)
• $prefix ([String][sass-string]): Prepended to every rule. Defaults to .icon-.

Outputs a class for every icon in the specified color. This mixin also outputs a width, height and background-size based on the SVG's original dimensions.

@include sax-classes(red, ".icon-red-");

.icon-red-up-arrow {...}
.icon-red-left-arrow {...}
.icon-red-down-arrow {...}
.icon-red-right-arrow {...}

Usage

Single color SVGs

To output a SVG in a single color, you can call the sax function with a single color:

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

Which will compile to:

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

Multi-color SVGs

To output a SVG in multiple colors, first you must replace the stroke and fill attributes in your SVG with a color keyword — i.e. red, magenta, etc. The keyword you choose are used as a reference for when you want to replace that color in your SASS.

For example, with the following SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
    <rect fill="red" x="0" y="0" width="10" height="10"/>
    <rect fill="blue" x="10" y="10" width="10" height="10"/>
</svg>

You can replace these colors in your SASS with:

.arrow {
    background-image: sax(arrow, $red: #d700ee, $blue: #9600bb);
}

If you do not include a replacement color, the original color (as defined in the SVG) will be used instead. Whilst this is useful for debugging, you can also set a default replacement color as the second argument for when a keyword is omitted:

.arrow {
    background-image: sax(arrow, #000, $red: #d700ee);
}

Additionally, you can use a variable arguments for consistent theming:

$theme: ("red": #d700ee, "blue": #9600bb);

.arrow {
    background-image: sax(arrow, $theme...);
}

Troubleshooting

See Troubleshooting

Examples

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

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

// Parse SVG files
const result = sax.parseSync([
    'path/to/icon1.svg',
    'path/to/icon2.svg',
    'path/to/icon3.svg',
]);

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

Then in your SCSS:

.icon1 {
	background-image: sax(icon1, #F00);
	width: sax-width(icon1);
	height: sax-height(icon1);
	
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

Will compile to:

.icon1 {
	background-image: url("data:image/svg+xml,...");
	width: 123px;
	height: 123px;
    
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}