A SVG to CSS icon solution non-broken fork of gulp-iconify
##Usage
npm install gulp-svgify --save-dev
###Simple example
gulp.task('default', function() {
iconify({
src: './img/icons/*.svg'
});
});
This simple call defaults to the following:
- SVGs will be passed through SVGO (and optimised)
- Rendered SCSS files will NOT be saved
- Rendered CSS files will be saved in: './css'
- If SVG has no width attribute, the default fallback will be 300px
- If SVG has no height attribute, the default fallback will be 200px
- The default styleTemplate fill be used (examples shown below)
- The default styleTemplate will not use the height/width slugs
###Customized example
gulp.task('default', function() {
iconify({
src: './img/icons/*.svg',
scssOutput: './scss',
cssOutput: './css',
styleTemplate: '_icon_gen.scss.mustache',
defaultWidth: '300px',
defaultHeight: '200px',
svgoOptions: {
enabled: true,
options: {
plugins: [
{ removeUnknownsAndDefaults: false },
{ mergePaths: false }
]
}
}
});
});
Note: To disable SVGO, just set svgoOptions: { enabled: ___ }
to anything but true
.
###Example (and default) styleTemplate:
.icon {
background-repeat: no-repeat;
{{#items}}
&.icon-{{slug}} {
background-image: url('{{{datauri}}}');
}
{{/items}}
}
###Example styleTemplate with height/width slugs:
.icon {
background-repeat: no-repeat;
{{#items}}
&.icon-{{slug}} {
background-image: url('{{{datauri}}}');
width: {{width}}px;
height: {{height}}px;
}
{{/items}}
}