//webpack.config.js//load plugins
plugins: [//create svg sprite from /path/to/*.svgnewSvgStore(path.join(_path+'/app/assets/svg'),{// svg prefixprefix: 'icon-',svg: {style: 'position:absolute; width:0; height:0',xmlns: 'http://www.w3.org/2000/svg'},//output sectionoutput: [// you can create 1 or multiply sprites{// filter by prefixfilter: 'Logo-',// add md5 hash to file namesprite: 'svg/[hash].logo_sprite.svg'},{// except filter - all except 'Logo-'filter: 'except-Logo-',sprite: 'svg/[hash].sprite.svg'}],// append svgXHR function to call spriteappend: true,// deafult: falseappendPath: path.join(_path,'app','views','shared','_sprite.html.slim'),// path to fileloop: 2,min: true})]
Examples
1 sprite for all svg's
newSvgStore(path.join(_path+'/app/assets/svg'),{svg: {style: 'position:absolute; width:0; height:0',xmlns: 'http://www.w3.org/2000/svg'},output: [{filter: 'all',// to get all svg'ssprite: 'svg/sprite.svg'}]})
Add prefix
newSvgStore(path.join(_path+'/app/assets/svg'),{prefix: 'icon-',// add prefixsvg: {style: 'position:absolute; width:0; height:0',xmlns: 'http://www.w3.org/2000/svg'},output: [{filter: 'all',// to get all svg'ssprite: 'svg/sprite.svg'}]})
newSvgStore(path.join(_path+'/app/assets/svg'),{prefix: 'icon-',svg: {style: 'position:absolute; width:0; height:0',xmlns: 'http://www.w3.org/2000/svg'},output: [{filter: 'all',sprite: 'svg/[hash].sprite.svg'}],min: true,loop: 2// default: 1 - sometimes need more than one})
Get 2 different sprites by filter
newSvgStore(path.join(_path+'/app/assets/svg'),{prefix: 'icon-',svg: {style: 'position:absolute; width:0; height:0',xmlns: 'http://www.w3.org/2000/svg'},output: [{// 1 sprite with all svgs which name contains 'Logo-' filter: 'Logo-',sprite: 'svg/[hash].logo_sprite.svg'},{// 2 sprite with all other svg except names contains 'Logo-'filter: 'except-Logo-',sprite: 'svg/[hash].sprite.svg'}],min: true,loop: 2})
Append gotten sprites by ajax with custom formatting dynamically to some file - Comming soon