{"id":17246282,"url":"https://github.com/davidwells/icon-pipeline","last_synced_at":"2025-04-13T15:31:06.610Z","repository":{"id":57270921,"uuid":"164555707","full_name":"DavidWells/icon-pipeline","owner":"DavidWells","description":"🚚 SVG icon pipeline - Optimize icons \u0026 build SVG sprites","archived":false,"fork":false,"pushed_at":"2023-12-16T20:40:22.000Z","size":264,"stargazers_count":87,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T06:22:42.459Z","etag":null,"topics":["build","icons","optimize","svg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DavidWells.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-08T03:54:18.000Z","updated_at":"2025-03-15T03:27:20.000Z","dependencies_parsed_at":"2022-09-06T21:50:38.928Z","dependency_job_id":null,"html_url":"https://github.com/DavidWells/icon-pipeline","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidWells%2Ficon-pipeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidWells%2Ficon-pipeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidWells%2Ficon-pipeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidWells%2Ficon-pipeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DavidWells","download_url":"https://codeload.github.com/DavidWells/icon-pipeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246167662,"owners_count":20734384,"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":["build","icons","optimize","svg"],"created_at":"2024-10-15T06:33:05.890Z","updated_at":"2025-03-29T09:31:47.421Z","avatar_url":"https://github.com/DavidWells.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Icon Pipeline\n\n\u003e The no nonsense icon pipeline\n\nOptimizes svg icons and creates SVG sprites for `\u003cuse\u003e` tags.\n\nAutomatically optimize SVGs and build icon sprite for use in HTML or in JS.\n\n## Install\n\n```\nnpm install icon-pipeline\n```\n\n## Usage\n\nInclude `icon-pipeline` as a dev dependency and call it during your build process.\n\nHere is an example:\n\n```js\nconst path = require('path')\nconst iconPipeline = require('icon-pipeline')\n\nconst iconSrcFolder = path.join(__dirname, 'src', 'icons')\nconst iconOutputFolder = path.join(__dirname, 'build', 'icons')\n\n/* Generate optimized SVGs and icon sprite */\niconPipeline({\n  // Location of non optimized svg icons\n  srcDir: iconSrcFolder,\n  // Output directory for optimized svg icons \u0026 svg sprite\n  outputDir: iconOutputFolder,\n  // Includes the sprite.js \u0026\u0026 sprite.svg in original icon directory\n  includeSpriteInSrc: true,\n  // Turn off additional svg classes added for advanced styling\n  /* disableClasses: true, */\n  // Namespace of icon IDs. Will prefix icon names. Example 'foo.svg' will become 'company-foo'\n  /* namespace: 'company' */\n}).then((iconData) =\u003e {\n  console.log('iconData', iconData)\n})\n\nconsole.log(iconData)\n```\n\nSee [`make-icons.js` file](/example) for a working example of this.\n\n### Input\n\nSo for example, the src directory (**srcDir**) of unoptimized SVG icons looks like:\n\n```\nsrc/icons/\n├── profile.svg\n├── github.svg\n└── facebook.svg\n```\n\n### Output \n\nThe output directory (**outputDir**) of icons will result in:\n\n```\nbuild/icons/\n├── sprite.svg     \u003c-- SVG sprite for usage in HTML\n├── sprite.js      \u003c-- SVG sprite for usage in javascript\n├── icon-list.js   \u003c-- manifest of all available icons\n├── profile.svg    \u003c-- optimized svg\n├── github.svg     \u003c-- optimized svg\n└── facebook.svg   \u003c-- optimized svg\n```\n\n## How to reference sprite icons\n\nThere are a couple different ways you can reference your newly created icon sprite.\n\n### Vanilla HTML\n\nInclude your `sprite.svg` into your DOM.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv\u003eYour app\u003c/div\u003e\n    \u003c!-- Include the sprite --\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" style=\"position:absolute; width: 0; height: 0\"\u003e\n      \u003csymbol viewBox=\"0 0 24 24\" id=\"facebook\"\u003e\n        \u003cpath d=\"M18.768 7.465Hl.417-4z...\"\u003e\u003c/path\u003e\n      \u003c/symbol\u003e\n      \u003csymbol viewBox=\"0 0 24 24\" id=\"github\"\u003e\n        \u003cpath d=\"M12 0C5.374 0 0 5.373...\"\u003e\u003c/path\u003e\n      \u003c/symbol\u003e\n    \u003c/svg\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Javascript\n\nOr include the `sprite.js` into your JS app and inject into the DOM.\n\n```js\nimport sprite from './icons/sprite'\nimport addSVGtoDOM from './components/Icon/addSVGtoDOM'\naddSVGtoDOM(null, sprite)\n```\n\nSee the [example](/example) for how to use with React components.\n\n### `use` tag\n\nAfter your sprite is in the DOM, you can reference icons with the `use` tag and the ID of the icon. `#facebook` here is the name of the icon file.\n\n```html\n\u003csvg\u003e\n  \u003cuse xlink:href=\"#facebook\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n\n## Recommended SVG resources\n\n- [How to work with SVG icons](https://fvsch.com/svg-icons/)\n- [Ways to manage icons in React](https://benadam.me/thoughts/react-svg-sprites/)\n\n## SVG tools\n\n- Image to SVG https://github.com/Schniz/svgify\n- SVG to font https://github.com/jaywcjlove/svgtofont\n\n## Alt packages\n\n- https://github.com/svg-sprite/svg-sprite\n- https://github.com/kreuzerk/svg-to-ts\n- https://github.com/natemoo-re/astro-icon\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidwells%2Ficon-pipeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidwells%2Ficon-pipeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidwells%2Ficon-pipeline/lists"}