svg file) will be wrapped up in a tag with a unique, prefixed ID, and the file name (minus the. In the output file, svg-defs.svg, each icon (whatever paths and stuff from the source. Prefix : 'shape-', // This will prefix each ID
Make sure the task is available with: grunt.loadNpmTasks('grunt-svgstore') You can install it with: npm install grunt-svgstore -save-dev If you’ve never used Grunt, you can do it. Fabrice Weinberg has created a Grunt plugin called grunt-svgstore that automates this. Read all about it!Īgain you can do that by hand, but of course that’s a bit laborious. Turns out is probably a better choice than. Each tag will have a unique ID, and will wrap all the paths and whatnot for each icon. It should just be an tag, with a tag (which just means you are defining stuff to use later), and then a bunch of (group) tags. You don’t even have to look at the final file. You can let Illustrator (or whatever) save it however, with all the cruft that comes along for the ride: They can be colored, not colored, multiple shapes, sizes, whatever. That’s one of the cool things about working with SVG – they are the source files. However, I think assuming you’re good with IE 9+, using inline SVG and the element to reference an icon is a superior system.Ī nice way to handle your icons is to have a folder full of. Lots of sites really need a system for icons, and icon fonts offer a damn fine system.
