Added 'grunt-svg-sprite' plugin

The plugin replaces 'svgmin' and 'svgstore' with an all-in-one and highly flexible solution for managing SVG assets.

Changes:
- Deleted 'assets/images/sprite/', SVG images can live anywhere within the source image directory;
- When compiled to 'www/assets/images/sprite.svg', the plugin generates an HTML file in 'assets/images/sprite.symbol.html' that serves as an index of the spritesheet's contents;
- A separator ("--") is used when traversing a directory structure for the symbol ID (e.g, 'sprite.svg#icons--social--twitter');
This commit is contained in:
Chauncey McAskill
2016-04-11 15:49:10 -04:00
parent bf0c7e148c
commit a0f74506d2
9 changed files with 32 additions and 37 deletions

View File

@@ -32,5 +32,4 @@ module.exports = function (grunt)
}
}
});
};

View File

@@ -17,8 +17,7 @@
"browserify:prod",
"concat:prod",
"uglify",
"svgstore",
"svgmin",
"svg_sprite",
"notify:build"
],

View File

@@ -0,0 +1,29 @@
module.exports = {
options : {
svg: {
xmlDeclaration : false,
namespaceIDs : true,
doctypeDeclaration : false,
cleanupNumericValues : true,
removeTitle : true,
removeDesc : true
}
},
prod: {
expand : true,
cwd : '<%= paths.img.src %>',
src : [ '**/*.svg', '!sprite.svg' ],
dest : '<%= paths.img.dist %>',
options : {
mode: {
symbol: {
dest : '.',
sprite : 'sprite.svg',
example : {
dest: '../../../build/sprite.symbol.html'
}
}
}
}
}
}

View File

@@ -1,22 +0,0 @@
module.exports = {
options: {
plugins: [
{ removeViewBox: false },
{ cleanupIDs: false },
{ convertPathData: false },
{ mergePaths: false },
{ convertShapeToPath: false },
{ cleanupNumericValues: false },
{ convertTransform: false },
{ removeUselessStrokeAndFill: false },
{ removeTitle: true },
{ removeDesc: true }
]
},
dist: {
expand : true,
cwd : '<%= paths.img.dist %>',
src : '*.svg',
dest : '<%= paths.img.dist %>'
}
};

View File

@@ -1,8 +0,0 @@
module.exports = {
options: {},
prod: {
files: {
'<%= paths.img.dist %>/sprite.svg': [ '<%= paths.img.src %>/sprite/*.svg' ]
}
}
};

View File

@@ -13,7 +13,7 @@ module.exports = {
},
svg: {
files: [ '<%= paths.img.src %>/**/*.svg' ],
tasks: [ 'svgstore', 'notify:svg' ]
tasks: [ 'svg_sprite', 'notify:svg' ]
},
tasks: {
options: {

View File

@@ -24,8 +24,7 @@
"grunt-phplint": "0.0.0",
"grunt-postcss": "0.0.0",
"grunt-sass": "0.0.0",
"grunt-svgmin": "0.0.0",
"grunt-svgstore": "0.0.0",
"grunt-svg-sprite": "0.0.0",
"load-grunt-config": "0.0.0",
"postcss-banner": "0.0.0",
"svg4everybody": "0.0.0"

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg"/>

Before

Width:  |  Height:  |  Size: 41 B