My grunt file looks like:
module.exports = function( grunt ) {
grunt.initConfig({
svg_sprite : {
options : {
},
your_target : {
expand : true,
src : [
'A-checkmarkblack.svg',
'B-checkmarkpurple.svg',
'C-checkmarkwhite.svg',
'D-emptyheart.svg',
'E-message.svg',
'F-heartIcon.svg',
'G-share-alt.svg',
'H-tag.svg',
'I-camera.svg',
'J-down.svg',
'K-up.svg',
],
dest : 'images',
options: {
shape: {
dimension: {
maxWidth: 200,
maxHeight: 60
},
spacing : {
padding: 2
},
},
mode: {
css : {
bust: false,
layout: "horizontal"
},
},
}
}
}
});
grunt.loadNpmTasks('grunt-svg-sprite');
grunt.registerTask("default", ["svg_sprite"]);
};
If you see the names of SVG icons, I have used A, B, C ...and so on for naming them. Grunt-SVG-Sprite makes the sprite by taking the name of icons alphabetically. Thus the reason why I added A,B,C..is if I add any more icons, I will include them as K,L.. so that they append at the last in existing sprite, not interfering the existing icons and their background properties. How do I ensure that the new icons added to my folder will only append at the last?
EDIT: Solved this second issue (see my comment):
Second issue is the name of the sprite generated. As per current grunt file, it generates sprite.css.svg . I want to name it as say, MyIcons.svg, how do I do it?