{"id":13658304,"url":"https://github.com/FWeinb/grunt-svgstore","last_synced_at":"2025-04-24T08:31:53.182Z","repository":{"id":14691119,"uuid":"17410950","full_name":"FWeinb/grunt-svgstore","owner":"FWeinb","description":"Merge svgs from a folder","archived":false,"fork":false,"pushed_at":"2019-06-27T20:49:42.000Z","size":231,"stargazers_count":919,"open_issues_count":33,"forks_count":90,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-04-14T15:00:24.848Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FWeinb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-04T17:43:46.000Z","updated_at":"2024-10-12T08:13:30.000Z","dependencies_parsed_at":"2022-09-26T20:11:13.548Z","dependency_job_id":null,"html_url":"https://github.com/FWeinb/grunt-svgstore","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FWeinb%2Fgrunt-svgstore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FWeinb%2Fgrunt-svgstore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FWeinb%2Fgrunt-svgstore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FWeinb%2Fgrunt-svgstore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FWeinb","download_url":"https://codeload.github.com/FWeinb/grunt-svgstore/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250592073,"owners_count":21455494,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T05:00:58.485Z","updated_at":"2025-04-24T08:31:52.814Z","avatar_url":"https://github.com/FWeinb.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# grunt-svgstore [![NPM version](https://badge.fury.io/js/grunt-svgstore.svg)](http://badge.fury.io/js/grunt-svgstore) [![Build Status](https://travis-ci.org/FWeinb/grunt-svgstore.svg?branch=master)](https://travis-ci.org/FWeinb/grunt-svgstore)\n\n\u003e Merge SVGs from a folder.\n\n## Want to help? \n\nI am looking for a maintainer who would like to take over this plugin. \n\n## Why?\n\nBecause [Chris Coyier](http://shoptalkshow.com/episodes/103-louis-lazaris/#t=33:52) asked.\n\n## Getting Started\n\nThis plugin requires Grunt `~0.4.5`\n\nIf you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:\n\n```shell\nnpm install grunt-svgstore --save-dev\n```\n\nOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:\n\n```js\ngrunt.loadNpmTasks('grunt-svgstore');\n```\n\n## Screencast \n\nChris made a screencast, using `grunt-svgstore` in a real project, you can find it [here](http://css-tricks.com/video-screencasts/screencast-134-tour-site-progress-built-jekyll-grunt-sass-svg-system/).\n\n\n## The \"svgstore\" task\n\n### Overview\n\nIn your project's Gruntfile, add a section named `svgstore` to the data object passed into `grunt.initConfig()`.\n\n```js\ngrunt.initConfig({\n  svgstore: {\n    options: {\n      prefix : 'icon-', // This will prefix each ID\n      svg: { // will add and overide the the default xmlns=\"http://www.w3.org/2000/svg\" attribute to the resulting SVG\n        viewBox : '0 0 100 100',\n        xmlns: 'http://www.w3.org/2000/svg'\n      }\n    },\n    your_target: {\n      // Target-specific file lists and/or options go here.\n    },\n  },\n});\n```\n\n### Options\n\n#### options.prefix\n\nType: `String`  \nDefault value: `''`  \n\nA string value that is used to prefix each filename to generate the id.\n\n#### options.svg\n\nType: `Object`  \nDefault value: `{}`  \n\nAn object that is used to generate attributes for the resulting `svg` file.\n```js\n{\n  viewBox: '0 0 100 100'\n}\n```\nwill result in:\n\n```svg\n\u003csvg viewBox=\"0 0 100 100\"\u003e\n[...]\n```\n\n#### options.symbol (since 0.2.4)\n\nType: `Object`  \nDefault value: `{}`  \n\nJust like `options.svg` but will add attributes to each generated `\u003csymbol\u003e`.\n\n#### options.formatting (since 0.0.4)\n\nType: `Object` or `boolean`  \nDefault value: `false`  \n\nFormatting options for generated code.\n\nTo format the generated HTML, set `formatting` with [options](https://github.com/einars/js-beautify#options) like: `{indent_size : 2}`, which in context looks like:\n\n```js\ndefault: {\n  options: {\n    formatting : {\n      indent_size : 2\n    }\n  }\n```\nSee [js-beautify](https://github.com/einars/js-beautify) for more options.\n\n#### options.includedemo (since 0.3.5)\n\nType: `boolean|string|function`  \nDefault value: `false`\n\nThis will include a demo HTML (named like `destName + -demo.html`) from where you can copy your `\u003cuse\u003e` blocks.\n\nThe default template used looks like:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cstyle\u003e\n      svg{\n       width:50px;\n       height:50px;\n       fill:black !important;\n      }\n    \u003c/style\u003e\n  \u003chead\u003e\n  \u003cbody\u003e\n    {{{svg}}}\n\n    {{#each icons}}\n        \u003csvg\u003e\n          \u003cuse xlink:href=\"#{{name}}\" /\u003e\n        \u003c/svg\u003e\n    {{/each}}\n\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nSince `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 expected to take one parameter and return a string. \n\nThe data passed to the template looks like this:\n```js\n{\n  svg : '[raw HTML of the generated svg]',\n  icons : [\n    name : 'name of an item',\n    title : 'extracted title or name'\n  ]\n}\n```\n\n#### options.cleanup (since 0.2.6)\n\nType: `boolean`  or `Array`\nDefault value: `false`  \n\nThis option can be used to clean up inline definitions that may jeopardise later CSS-based styles.  \nWhen set to true clean up all inline `style` attributes.  \nApart 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.\n\n#### options.cleanupdefs (since 0.3.0)\n\nType: `boolean`  \nDefault value: `false`  \n\nWhen set to false, no cleanup is performed on the `\u003cdefs\u003e` element.\n\n#### options.inheritviewbox (since 0.4.0)\n\nType: `boolean`  \nDefault value: `false`\n\nBy default, each generated `\u003csymbol\u003e` will only automatically have a `viewBox`\nattribute set if the original source SVG file for that symbol has a `viewBox`.\n\nWhen `inheritviewbox` is set to `true`, if the source SVG has no `viewBox` but\nit *does* have a pixel-based `width` and `height`, then the `\u003csymbol\u003e`\n`viewBox` will be derived using those values instead.\n\nFor example, with `inheritviewbox: true`,\n\n```svg\n\u003csvg width=\"256\" height=\"128\"\u003e\n```\n\nwill result in:\n\n```svg\n\u003csymbol viewBox=\"0 0 256 128\" ...\u003e\n```\n\n#### options.convertNameToId (since 0.4.0)\n\nType: `function`\n\nThe function used to generate the ID from the file name. The function receives the file name without the `.svg` extension as its only argument.\n\nThe default implementation:\n```js\nfunction(name) {\n  var dotPos = name.indexOf('.');\n  if ( dotPos \u003e -1){\n    name = name.substring(0, dotPos);\n  }\n  return name;\n}\n```\n\n#### options.fixedSizeVersion (Since 0.4.0)\n\nType: `Object` or `boolean`\nDefault value: `false`\n\nWhen `true` or a configuration object is passed for each of the symbols another one, with suffixed id generated.\nAll those additional symbols have the common dimensions and refers to the original symbols with `\u003cuse\u003e`.\nOriginal symbols are placed exactly in the middle of the fixed-size viewBox of the fixed size version.\n\nConfiguration reference and default values if `true` is passed:\n```js\ngrunt.initConfig({\n  svgstore: {\n    options: {\n      fixedSizeVersion: {\n        width: 50,\n        height: 50,\n        suffix: '-fixed-size',\n        maxDigits: {\n          translation: 4,\n          scale: 4,\n        },\n      },\n    },\n  },\n});\n```\n\nAny of the configuration object properties may be omitted.\n\n### Usage Examples\n\nThis example will merge all elements from the `svgs` folder into the `\u003cdefs\u003e`-Block of the `dest.svg`. You can use that SVG in HTML like:\n\n```html\n\u003c!-- Include dest.svg --\u003e\n\n[...]\n\n\u003csvg\u003e\u003cuse xlink:href=\"#filename\" /\u003e\u003c/svg\u003e\n````\n\n```js\ngrunt.initConfig({\n  svgstore: {\n    options: {},\n    default : {\n      files: {\n        'dest/dest.svg': ['svgs/*.svg'],\n      },\n    },\n  },\n});\n```\n\n#### options.includeTitleElement (since 0.5.0)\n\nType: `Boolean`\nDefault value: `true`\n\nInclude a `\u003ctitle\u003e` element for screen readers. Uses the filename if no `\u003ctitle\u003e` was found on the source SVG. Set to `false` only if you are providing your own accessible name in your code.\n\n#### options.preserveDescElement (since 0.5.0)\n\nType: `Boolean`\nDefault value: `true`\n\nPreserve `\u003cdesc\u003e` element for screen readers if present. Set to `false` to suppress.\n\n#### options.removeWithId\n\nType: `String`\nDefault value: `null`\n\nUse this option to provide an ID of an SVG element you'd like removed. Likely use case is a bounding box path. Simply add `id='remove-me'` and then supply `removeWithId: 'remove-me'` in the options.\n\n## Supplemental Features\n\nThere are some hidden features available in grunt-svgstore:\n\n  * Use the `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`.\n  * Using the value of `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.\n\n## Contributing\n\nIn 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](http://gruntjs.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFWeinb%2Fgrunt-svgstore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFWeinb%2Fgrunt-svgstore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFWeinb%2Fgrunt-svgstore/lists"}