Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating svg sprites using grunt module

I'm new to grunt and node js. I'm facing issues in creating svg sprites using grunt-svg-sprite module. I have used grunt-svg-sprite module to create svg sprite image. I have installed the grunt-svg-sprite module using the following command.

    npm install grunt-svg-sprite --save-dev

I enabled the plugin in my grunt.js file using the line below.

    grunt.loadNpmTasks('grunt-svg-sprite');  

And my plugin configuration is as follows

  svg_sprite                  : {
    basic                   : {

        // Target basics 
        expand              : true,
        cwd                 : 'images/svg-logo/',
        src                 : 'images/svg-logo/*.svg',
        dest                : 'out/',

        // Target options 
        options             : {
            mode            : {
                css         : {     // Activate the «css» mode 
                    render  : {
                        css : true  // Activate CSS output (with default options) 
                    }
                }
            }
        }
    }
},

My folder structure is given below

    Project_folder
    ├───css
    ├───Images
    │   └───svg-logo
    ├───GruntFile.js
    ├───html
    ├───node_modules
    ├───include
    ├───package.json

When i run the following command, i get the success message, but there is no folder has created.

like image 761
Vandhana Jayaprakash Avatar asked Feb 05 '26 19:02

Vandhana Jayaprakash


1 Answers

Everything is ok here. src should be specify only the file there. Try with this one.

    svg_sprite : {
        basic : {

            expand : true,
            cwd : 'images/svg-logo',
            src : ['**/*.svg'],
            dest : 'out',

            options : {
                mode : {
                    css : {
                        render  : {
                            css : true
                        },
                    },
                },
            },
        },
    },
like image 64
Thiyagesh Avatar answered Feb 09 '26 07:02

Thiyagesh