ee-grunt-svgstore
Advanced tools
THIS IS A FORK OF grunt-svgstore. In most cases it's better to use the upstream package.
Merge SVGs from a folder.
Because Chris Coyier asked.
This plugin requires Grunt ~0.4.5
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-svgstore --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-svgstore');
Chris made a screencast, using grunt-svgstore in a real project, you can find it here.
In your project's Gruntfile, add a section named svgstore to the data object passed into grunt.initConfig().
grunt.initConfig({
svgstore: {
options: {
prefix : 'icon-', // This will prefix each ID
svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
viewBox : '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg'
}
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
Type: String
Default value: ''
A string value that is used to prefix each filename to generate the id.
Type: Object
Default value: {}
An object that is used to generate attributes for the resulting svg file.
{
viewBox: '0 0 100 100'
}
will result in:
<svg viewBox="0 0 100 100">
[...]
Type: Object
Default value: {}
Just like options.svg but will add attributes to each generated <symbol>.
Type: Object or boolean
Default value: false
Formatting options for generated code.
To format the generated HTML, set formatting with options like: {indent_size : 2}, which in context looks like:
default: {
options: {
formatting : {
indent_size : 2
}
}
See js-beautify for more options.
Type: boolean|string|function
Default value: false
This will include a demo HTML (named like destName + -demo.html) from where you can copy your <use> blocks.
The default template used looks like:
<!doctype html>
<html>
<head>
<style>
svg{
width:50px;
height:50px;
fill:black !important;
}
</style>
<head>
<body>
{{{svg}}}
{{#each icons}}
<svg>
<use xlink:href="#{{name}}" />
</svg>
{{/each}}
</body>
</html>
Since 0.3.5 you can customise this by passing in a string that will be compiled via handlebars and used as a tempalte. If it is a function this function is expeced to take one parameter and return a string.
The data passed to the template looks like this:
{
svg : '[raw HTML of the generated svg]',
icons : [
name : 'name of an item',
title : 'extracted title or name'
]
}
Type: boolean or Array
Default value: false
This option can be used to clean up inline definitions that may jeopardise later CSS-based styles.
When set to true clean up all inline style attributes.
Apart from true / false, the value of this property can be an array of inline attributes ( like fill, stroke, ...) you want to remove from the elements in the SVG.
Type: boolean
Default value: false
When set to false, no cleanup is performed on the <defs> element.
Type: boolean
Default value: false
By default, each generated <symbol> will only automatically have a viewBox
attribute set if the original source SVG file for that symbol has a viewBox.
When inheritviewbox is set to true, if the source SVG has no viewBox but
it does have a pixel-based width and height, then the <symbol>
viewBox will be derived using those values instead.
For example, with inheritviewbox: true,
<svg width="256" height="128">
will result in:
<symbol viewBox="0 0 256 128" ...>
Type: function
The function used to generate the ID from the file name. The function receives the file name without the .svg extension as its only argument.
The default implementation:
function(name) {
var dotPos = name.indexOf('.');
if ( dotPos > -1){
name = name.substring(0, dotPos);
}
return name;
}
Type: Object or boolean
Default value: false
Creates one (or more) additional versions of the symbol by adding symbols that internally reference previously created
one but size of new symbols is fixed. All those additional symbols have the common dimensions and refer to the original
symbol with <use> internally therefore no SVG code is duplicated. Their names are composed out of the original symbol
name and a suffix (suffix setting). By default (when neither align nor verticalAlign settings are used) original
symbol is placed exactly in the middle of the fixed-size version viewBox.
Configuration reference:
grunt.initConfig({
svgstore: {
options: {
fixedSizeVersion: [
{
align: 'left', // possible values: 'left', 'right', 'center'. Default: 'center'
vAlign: 'bottom', // possible values: 'bottom', 'top', 'middle'. Default: 'middle'
width: 50, // Default: 50,
height: 50, // Default: 50
suffix: '-fixed-size', // Defaults to '-${align}-${vAlign}' if either align or vAlign is set. `-fixed-size` otherwise
maxDigits: {
translation: 4, // Default: 4
scale: 4, // Default: 4
},
}
],
},
},
});
if single fixed size version is created then object instead of an array can be passed.
This example will merge all elements from the svgs folder into the <defs>-Block of the dest.svg. You can use that SVG in HTML like:
<!-- Include dest.svg -->
[...]
<svg><use xlink:href="#filename" /></svg>
grunt.initConfig({
svgstore: {
options: {},
default : {
files: {
'dest/dest.svg': ['svgs/*.svg'],
},
},
},
});
There are some hidden features available in grunt-svgstore:
preserve-- prefix (in the source SVG), for any attributes that should be forced to remain in the resulting SVG. For example, preserve--stroke would result in just stroke in the resulting SVG. This happens whether or not you ask for that attribute to be cleaned via cleanup.currentColor on any property with the key fill, will result in that property remaining in the resulting SVG (regardless of whether or not you ask for fill to be cleaned via cleanup). This can be used to achieve accent color for you SVG instances by defining the font color on a parent element via the CSS color property.In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
preserve-- prefix for attributes to force these attributes in the result svg (See #71)convertNameToId option to customize how ids are derived from file names. (See #68)convertNameToId to prefix each id. (See #50)fill attribute even if cleanup is set to true. (See #63)handlebars templates in options.includedemo.0.17.0<symbol> tags. (See #50)linearGradient, radialGradient and pattern elements out of the <symbol> tag. (See #49)<defs> element. (#41)<g> elements are removed since they have no effect in a document. (#42)Thanks to Frank3K for the PRs
svgstore. (Thanks to #38)options.clean to remove inline styles from source svgs. (Thanks to ain)options.symbol to add attributes to generated <symbol>s (#30)name.min.svg becomes name. (Fixes #29)viewBox in outputted svg (fix #26)<symbol>-tag out of <defs>-tag (see the spec)<defs>-tag if needed (e.g. <linearGradient> is used)<symbol>-tag for representing icons (See TxHawks Comment.)viewBox attribute to the <symbol>-tag,title and desc elements in the generated svg for each <symbol>titleurl() (fix #12)options.formatting to format svg via js-beautifyFAQs
Merge SVGs from a folder.
We found that ee-grunt-svgstore demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.