@sgalinski/inline-svg
v1.2.2
Published
A library that transforms SVGs into inline-background-images
Downloads
3
Readme
Inline SVG
This module is the successor of gulp-inline-svg, rewritten as a standalone library.
The purpose of this moudle is to pass it a location to a folder containing SVG icons and get back a string containing inline-svg codes that can be used as background-image
. The output can be customized with a mustache-template. By default it will return a string that can be saved as a Sass-partial, offering a mixin and variables for each icon. By providing your own template, you can customize the output any way you want, though.
Compatibility
The generated SVG inline code is URL encoded, so it should be safe to use starting with IE 9.
Important notes
The generated mixin contains width and height values for each SVG. Those values are taken from the width and height attribute inside the SVG. If it does not provide them, they will be set to 0px. You can still overwrite them in your CSS.
Usage
Install the inline-svg module
npm i @sgalinski/inline-svg
Example for usage with Sass
const InlineSvg = require('@sgalinsk/inline-svg');
const fs = require('fs');
(async () => {
const sassTemplate = await new InlineSvg('./svgs');
fs.writeFileSync('./_svg.scss', sassTemplate);
})();
Usage in Sass
Given you have an icon called icon-trash.svg
@import 'svg';
.a-button--delete {
@include inline-svg($icon-trash);
}
Configuration
Use your own template
If you don't want to use the default Sass-template, you can esaily write your own and pass it as a configuration option:
const InlineSvg = require('@sgalinsk/inline-svg');
const fs = require('fs');
(async () => {
const sassTemplate = await new InlineSvg('./svgs', {
template: './my-template.mustache'
});
fs.writeFileSync('./_svg.scss', sassTemplate);
})();
Pass additional variables
If needed, you can pass additional variables to the mustache template:
const InlineSvg = require('@sgalinsk/inline-svg');
const fs = require('fs');
(async () => {
const sassTemplate = await new InlineSvg('./svgs', {
template: './my-template.mustache',
context: {
message: '// GENERATED BY gulpfile.js'
}
});
fs.writeFileSync('./_svg.scss', sassTemplate);
})();
And then use it in your template:
{{{message}}}
{{#svgs}}
${{{name}}}: "{{{inline}}}" {{width}} {{height}};
{{/svgs}}
@mixin inline-svg($name) {
background: transparent url(nth($name, 1)) no-repeat 50% 50%;
background-size: 100%;
width: nth($name, 2);
height: nth($name, 3);
}
@function inline-svg-width($name) {
@return nth($name, 2);
}
@function inline-svg-height($name) {
@return nth($name, 3);
}
Customize variables
If you want to use your own naming convention for the SVG-variables, you can pass an interceptor-function:
const InlineSvg = require('@sgalinsk/inline-svg');
const fs = require('fs');
(async () => {
const sassTemplate = await new InlineSvg('./svgs', {
interceptor: function (svgData) {
return Object.assign(svgData, { variableName: svgData.name.toLowerCase(), prefix: 'dso-icon' });
}
});
fs.writeFileSync('./_svg.scss', sassTemplate);
})();
{{#svgs}}
${{prefix}}{{{variableName}}} "{{{inline}}}" {{width}} {{height}};
{{/svgs}}
@mixin inline-svg($name) {
background: transparent url(nth($name, 1)) no-repeat 50% 50%;
background-size: 100%;
width: nth($name, 2);
height: nth($name, 3);
}
@function inline-svg-width($name) {
@return nth($name, 2);
}
@function inline-svg-height($name) {
@return nth($name, 3);
}