{"id":13808643,"url":"https://github.com/angular-extensions/svg-icons-builder","last_synced_at":"2025-07-09T11:32:02.770Z","repository":{"id":39449494,"uuid":"304227887","full_name":"angular-extensions/svg-icons-builder","owner":"angular-extensions","description":"Angular builder to build svg-icons using svg-to-ts","archived":false,"fork":false,"pushed_at":"2024-02-13T07:39:11.000Z","size":820,"stargazers_count":24,"open_issues_count":10,"forks_count":9,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-06T23:03:29.030Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/angular-extensions.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-15T06:15:04.000Z","updated_at":"2025-05-18T17:19:42.000Z","dependencies_parsed_at":"2024-06-19T01:27:27.974Z","dependency_job_id":"7c37cc8d-7f3b-4a57-8fb9-abef181634ae","html_url":"https://github.com/angular-extensions/svg-icons-builder","commit_stats":{"total_commits":54,"total_committers":6,"mean_commits":9.0,"dds":"0.40740740740740744","last_synced_commit":"f9155571e17297ff032e15328a00651445a9e4cb"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/angular-extensions/svg-icons-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-extensions%2Fsvg-icons-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-extensions%2Fsvg-icons-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-extensions%2Fsvg-icons-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-extensions%2Fsvg-icons-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-extensions","download_url":"https://codeload.github.com/angular-extensions/svg-icons-builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-extensions%2Fsvg-icons-builder/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264222814,"owners_count":23575341,"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-04T01:01:47.924Z","updated_at":"2025-07-09T11:32:02.357Z","avatar_url":"https://github.com/angular-extensions.png","language":"TypeScript","readme":"# svg-icons-builder\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\nThe svg-icons-builder is a Angular builder for the [svg-to-ts](https://github.com/kreuzerk/svg-to-ts) project. It can be used to convert SVG icons inside an Angular library or SPA to an object, to constants or even to individual TypeScript or JavaScript files.\nFind out more on the official [svg-to-ts docs](https://github.com/kreuzerk/svg-to-ts).\n\n## Usage\n\n### Installation\n\nNPM: `npm install @angular-extensions/svg-icons-builder`\n\nAngular CLI: `ng add @angular-extensions/svg-icons-builder`\n\n### Configure the builder\n\nTo use the builder you need to add a new entry to your `architect` object inside your `angular.json`.\n\nA valid [svg-to-ts configuration](https://github.com/kreuzerk/svg-to-ts). ⚠️ the options depend on the `conversionType` and may therefore vary. Means, a configuration for the `convesionType: \"files\"` will look different than configuration for the `conversionType: \"constants\"`. Each `conversionType` has it's own builder.\n\nIn our example we call it `generate-icons`. You then need to specify the following properties:\n\n## `conversionType: constants`\n\n- **Builder**: `\"@angular-extensions/svg-icons-builder:svg-icons-constants-builder\"`\n- **Config**: [svg-to-ts constants config](https://github.com/kreuzerk/svg-to-ts#2-multiple-constants---treeshakable-and-typesafe-with-one-file-conversiontypeconstants)\n\n```json\n\"generate-icons\": {\n  \"builder\": \"@angular-extensions/svg-icons-builder:svg-icons-constants-builder\",\n  \"options\": {\n      \"conversionType\": \"constants\",\n      \"fileName\": \"myIcons\",\n      \"generateType\": false,\n      \"generateTypeObject\": false,\n      \"generateCompleteIconSet\": true,\n      \"srcFiles\": [\"./src/icons/*.svg\"],\n      \"outputDirectory\": \"./dist/icons\",\n      \"interfaceName\": \"DinosaurIcon\",\n      \"typeName\": \"dinosaurIcon\",\n      \"prefix\": \"dinosaurIcon\",\n      \"svgoConfig\": {\n        \"plugins\": [\"cleanupAttrs\"]\n      }\n  }\n}\n```\n\n## `conversionType: files`\n\n- **Builder**: `\"@angular-extensions/svg-icons-builder:svg-icons-files-builder\"`\n- **Config**: [svg-to-ts files config](https://github.com/kreuzerk/svg-to-ts#3-tree-shakable-and-optimized-for-lazy-loading-conversiontypefiles)\n\n```json\n  \"generate-icons\": {\n    \"builder\": \"@angular-extensions/svg-icons-builder:svg-icons-files-builder\",\n    \"options\": {\n      \"conversionType\": \"files\",\n      \"srcFiles\": [\"./projects/dinosaur-icons/icons/**/*.svg\"],\n      \"outputDirectory\": \"./dist/dinosaur-icons/icons\",\n      \"interfaceName\": \"DinosaurIcon\",\n      \"generateType\": false,\n      \"generateTypeObject\": false,\n      \"generateCompleteIconSet\": false,\n      \"exportCompleteIconSet\": false,\n      \"fileName\": \"dinosaur-icons\",\n      \"iconsFolderName\": \"dinosaur-icons\",\n      \"objectName\": \"dinosaur-icons\",\n      \"typeName\": \"dinosaurIcon\",\n      \"prefix\": \"dinosaurIcon\",\n      \"modelFileName\": \"dinosaur-icons\",\n      \"barrelFileName\": \"index\",\n      \"svgoConfig\": {\n        \"plugins\": [\"cleanupAttrs\"]\n      },\n      \"compileSources\": true\n    }\n  }\n```\n\n## `conversionType: object`\n\n- **Builder**: `\"@angular-extensions/svg-icons-builder:svg-icons-object-builder\"`\n- **Config**: [svg-to-ts object config](https://github.com/kreuzerk/svg-to-ts#1-converting-to-a-single-object-conversiontypeobject)\n\n```json\n  \"generate-icons\": {\n    \"builder\": \"@angular-extensions/svg-icons-builder:svg-icons-object-builder\",\n    \"options\": {\n      \"conversionType\": \"object\",\n      \"srcFiles\": [\"./projects/dinosaur-icons/icons/**/*.svg\"],\n      \"outputDirectory\": \"./dist/dinosaur-icons/icons\",\n      \"fileName\": \"dinosaur-icons\",\n      \"objectName\": \"dinosaur-icons\",\n      \"svgoConfig\": {\n        \"plugins\": [\"cleanupAttrs\"]\n      },\n      \"compileSources\": true\n    }\n  }\n```\n\n### Run the builder\n\nIn order to run the builder you have to add a new npm script to your `package.json`. Replace `name-of-your-app` with the name of your application 😉.\n\n```json\n\"genrate-icons\": \"ng run name-of-your-app:generate-icons\"\n```\n\n## Core Team ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.kaylaaltepeter.com/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/5103752?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKayla Altepeter\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/@angular-extensions/@angular-extensions/svg-icons-builder/commits?author=kaltepeter\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/@angular-extensions/@angular-extensions/svg-icons-builder/issues?q=author%3Akaltepeter\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/@angular-extensions/@angular-extensions/svg-icons-builder/commits?author=kaltepeter\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-kaltepeter\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/@angular-extensions/@angular-extensions/svg-icons-builder/commits?author=kaltepeter\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://medium.com/@kevinkreuzer\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/5468954?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKevin Kreuzer\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/@angular-extensions/@angular-extensions/svg-icons-builder/commits?author=kreuzerk\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/@angular-extensions/@angular-extensions/svg-icons-builder/issues?q=author%3Akreuzerk\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/@angular-extensions/@angular-extensions/svg-icons-builder/commits?author=kreuzerk\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#ideas-kreuzerk\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/@angular-extensions/@angular-extensions/svg-icons-builder/commits?author=kreuzerk\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-extensions%2Fsvg-icons-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-extensions%2Fsvg-icons-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-extensions%2Fsvg-icons-builder/lists"}