@zalupa/grunt-svg-extend v1.0.0
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.5 Included mixin option for implementation within media queries
- v0.1.4 Updated task overview
- v0.1.3 Fixed PNG issues
- v0.1.2 Removed underscore from 'svgextend' & added more useful grunt logs
- v0.1.1 Fixed PNG path issue and updated readme
- v0.1.0 Added PNG fallback option, choose a test class (e.g. no-svg) and a path to the fallback .png
- v0.0.2 Update to package.json
- v0.0.1 Initial commit
License
Copyright (c) 2014 Thomas Digby. Licensed under the MIT license.
7 years ago