gulp-svgify

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}}
}