grunt-svg-extend

Grunt task for converting SVGs to embedded data-uris

Usage no npm install needed!

<script type="module">
  import gruntSvgExtend from 'https://cdn.skypack.dev/grunt-svg-extend';
</script>

README

grunt-svg-extend

Grunt task for converting SVGs to embedded data-uris, outputting a series of SASS placeholders/mixins or CSS selectors. You can specify a PNG fallback location and combine it with a feature test to provide a fallback for unsupporting browsers.

Recommended to combine this task with grunt-svgmin and grunt-svg2png to create an automated UI workflow without the overheads of other grunt icon solutions.

Getting Started

This plugin requires Grunt.

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-svg-extend --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-svg-extend');

The "svgextend" task

Overview

In your project's Gruntfile, add a section named svgextend to the data object passed into grunt.initConfig().

grunt.initConfig({
    svgextend: {
        all: {
            options: {
                requirePng: true,
                pngDir: '/images/dist/png/',
                featureTest: 'no-svg'
            },
            inputDir: 'images/dist/svg/',
            outputDir: 'css/scss/',
            outputName: '_icons',
            outputType: 'mixin'
        }
    }
});

Options

inputDir

Type: String Default value: null

Source directory of input SVG files, cannot (currently) contain more than a single level.

outputDir

Type: String Default value: null

Target directory for output file.

outputName

Type: String Default value: null

Name for the output file.

outputType

Type: String Default value: null

Choose either placeholder, mixin or class. This will output either a .scss or .css file dependent on the choice of a regular selector or a SASS feature.

options.pngDir

Type: String Default value: images/dist/png/

Source directory of the fallback PNG file.

options.requirePng

Type: String Default value: false

Set to true if PNG fallback is required.

options.featureTest

Type: String Default value: no-svg

Class used to detect fallback, default is modernizr's no-svg.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

  • v1.0.0 Rewritten to include a number of outputs: placeholder, mixin and class selector. Improved parameter names, better error handling and a few bug fixes.

  • v0.1.5Included mixin option for implementation within media queries

  • v0.1.4Updated task overview

  • v0.1.3Fixed PNG issues

  • v0.1.2Removed underscore from 'svgextend' & added more useful grunt logs

  • v0.1.1Fixed PNG path issue and updated readme

  • v0.1.0Added PNG fallback option, choose a test class (e.g. no-svg) and a path to the fallback .png

  • v0.0.2Update to package.json

  • v0.0.1Initial commit

License

Copyright (c) 2014 Thomas Digby. Licensed under the MIT license.