Grunt-SVG-Sprite:根据需要在现有精灵和名称精灵中添加新的svg图标

时间:2015-10-13 14:15:22

标签: svg gruntjs sprite css-sprites grunt-svgstore

我的grunt文件如下:

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"]);

};

如果您看到SVG图标的名称,我使用了A,B,C ......等命名它们。 Grunt-SVG-Sprite通过按字母顺序取名图标来制作精灵。因此我添加A,B,C的原因是如果我添加更多图标,我将它们包含为K,L ..以便它们在现有精灵的最后添加,而不是干扰现有的图标及其背景属性。如何确保添加到我的文件夹的新图标仅在最后添加?

编辑:解决了第二个问题(见我的评论):

第二个问题是生成的精灵的名称。根据当前的grunt文件,它会生成 sprite.css.svg 。我想把它命名为MyIcons.svg,我该怎么做?

0 个答案:

没有答案