Grunt-SVG-Sprite: Append new svg icons in existing sprite and name sprite according to the need

244 Views Asked by At

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?

0

There are 0 best solutions below