gulp-svgify
A SVG to CSS icon solution non-broken fork of gulp-iconify
Usage
npm install gulp-svgify --save-dev
Simple example
gulp;
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;
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}}}