{"id":13808612,"url":"https://github.com/bodnya29179/Angular-Svg-Sprite","last_synced_at":"2025-05-14T02:32:09.814Z","repository":{"id":159274540,"uuid":"628601530","full_name":"bodnya29179/Angular-Svg-Sprite","owner":"bodnya29179","description":"🎨 Simplify SVG icon usage in your Angular project! Enhance the flexibility and manageability of your Angular project by using SVG sprites.","archived":false,"fork":false,"pushed_at":"2024-08-02T14:45:12.000Z","size":536,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-08-03T13:26:41.835Z","etag":null,"topics":["angular","optimization","svg-component","svg-icons","svg-sprites"],"latest_commit_sha":null,"homepage":"","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/bodnya29179.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"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":"2023-04-16T13:16:00.000Z","updated_at":"2024-08-02T14:45:16.000Z","dependencies_parsed_at":"2024-08-02T13:27:29.813Z","dependency_job_id":null,"html_url":"https://github.com/bodnya29179/Angular-Svg-Sprite","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bodnya29179%2FAngular-Svg-Sprite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bodnya29179%2FAngular-Svg-Sprite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bodnya29179%2FAngular-Svg-Sprite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bodnya29179%2FAngular-Svg-Sprite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bodnya29179","download_url":"https://codeload.github.com/bodnya29179/Angular-Svg-Sprite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273250,"owners_count":17448074,"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":["angular","optimization","svg-component","svg-icons","svg-sprites"],"created_at":"2024-08-04T01:01:47.432Z","updated_at":"2024-11-19T00:30:53.195Z","avatar_url":"https://github.com/bodnya29179.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Icons"],"readme":"# Angular SVG Sprite\n\n## The aim\nThe project aims to generate an SVG sprite that enables us to achieve the following objectives:\n\n- Optimize the use of SVG files through the creation of an SVG icon component;\n- Allow the editing of SVG files without losing their functionality when using the `\u003cimg/\u003e` tag.\n- Automatically regenerate the SVG sprite when icons are added, edited, or removed, and the app is running.\n- Reduce the number of HTTP requests when fetching icons from the assets folder by using a service for loading SVG icons.\n\n## Installation\n\nRun the commands in your project:\n* `npm install svg-sprite --save-dev`\n* `npm install onchange --save-dev`\n* `npm install npm-run-all --save-dev`\n* `npm install uuid`\n\n## Steps\n### 1. Creating the svg-sprite generation script:\n- Script file: [generate-svg-sprite.js](scripts/generate-svg-sprite.js).\n\nWhere:\n- `ICONS_PATH` is the path where your svg-icons are located;\n- `SVG_SPRITE_PATH` is the path where your generated sprite will be located;\n- `SVG_SPRITE_FILENAME` is the name of the sprite that you want to save.\n\n### 2. Creating the services that work with sprite:\n- Sprite loader service: [sprite-loader.service.ts](src/app/shared/services/sprite-loader/sprite-loader.service.ts);\n- Svg service: [svg.service.ts](src/app/shared/services/svg/svg.service.ts).\n\n### 3. Creating the svg-icon component:\n- Svg icon component: [svg-icon.component.ts](src/app/shared/components/svg-icon/svg-icon.component.ts).\n\n### 4. Adding the commands to `package.json`:\n- `start` allows us to \u003cins\u003e**wait for svg-sprite generation and app startup**\u003c/ins\u003e, and \u003cins\u003e**begin monitoring svg file changes to regenerate the sprite as needed**\u003c/ins\u003e:\n    ```json\n    \"start\": \"npm-run-all --parallel serve watch-sprite\"\n    ```\n\n- `serve` allows us to \u003cins\u003e**generate the svg-sprite**\u003c/ins\u003e and run our app:\n    ```json\n    \"serve\": \"npm run generate-sprite \u0026\u0026 ng serve\"\n    ```\n\n- `build` allows us to \u003cins\u003e**prepare the svg-sprite before making the app build**\u003c/ins\u003e \u0026 \u003cins\u003e**build the app**\u003c/ins\u003e:\n    ```json\n    \"build\": \"npm run generate-sprite \u0026\u0026 ng build\"\n    ```\n\n- `generate-sprite` allows us to \u003cins\u003e**generate the svg-sprite file**\u003c/ins\u003e by running the script:\n    ```json\n    \"generate-sprite\": \"node scripts/generate-svg-sprite.js\"\n    ```\n\n- `watch-sprite` allows us to \u003cins\u003e**listen the svg-icon changes during the running of app**\u003c/ins\u003e (adding/editing/removing icons, etc.) \u0026 \u003cins\u003e**regenerate the sprite build**\u003c/ins\u003e: \n    ```json\n    \"watch-sprite\": \"onchange \\\"./src/assets/icons/**/*.svg\\\" --initial --kill -- npm run generate-sprite\"\n    ```\n\n### 5. Adding svg-icons to the `assets` folder.\n\n### 6. Adding the svg-sprite to the `.gitignore` file for not saving it:\n```gitignore\n# Auto-generated sprites folder\nsvg-sprite.svg\n```\n\n### 7. Using the svg-icon component:\nAdding icons to template:\n```html\n\u003csvg-icon [src]=\"\u003cyour-icon-name-here\u003e\"\u003e\u003c/svg-icon\u003e\n```\n\nChanging icon styles (optional):\n\n- Way #1: Changing colors by ::ng-deep.\n\n  ```scss\n  svg-icon::ng-deep {\n    svg path {\n      fill: \u003csome-color-here\u003e;\n    }\n  }\n  ```\n  or\n  ```scss\n  svg-icon::ng-deep {\n    svg path {\n      stroke: \u003csome-color-here\u003e;\n    }\n  }\n  ```\n  \n- Way #2: Changing colors by font color of the parent element.\n\n  ```svg\n  \u003csvg xmlns=\"http://www.w3.org/2000/svg\" ...\u003e\n    \u003c!-- fill --\u003e\n    \u003cpath fill=\"currentColor\" ... /\u003e\n    \u003c!-- or stroke --\u003e\n    \u003crect stroke=\"currentColor\" ... /\u003e\n  \u003c/svg\u003e\n  ```\n  and setting the font color in CSS / SCSS / SASS / Less.\n  ```scss\n  svg-icon {\n    color: \u003csome-color-here\u003e;\n  }\n  ```\n\nThe usage of `fill` or `stroke` depends on the `\u003cpath\u003e` type in the svg file.\n\n### Handling Gradient IDs\n\nDuring sprite generation, we \u003cins\u003eensure that all linear and radial gradient IDs in SVGs are\nunique\u003c/ins\u003e to prevent conflicts when multiple icons use gradients. This prevents issues with color references when\nmultiple SVGs are displayed, ensuring that each SVG maintains its intended gradient coloring even if others are added or\nremoved from the DOM.\n\n### ✨ New Features: Handling Unique IDs in SVGs\n\nWe have enhanced the way SVGs are processed during sprite generation:\n\n- **Automatic ID Uniqueness:** All elements with `id` attributes in SVGs are automatically assigned unique IDs to avoid conflicts. This includes not only gradients (linear and radial) but any other elements that use an `id`. The uniqueness is ensured by appending a unique suffix to each original `id`.\n- **Reference Updates:** All references to these IDs are automatically updated across the SVG. This includes any usage within attributes such as `fill`, `stroke`, `filter`, `clip-path`, `mask`, `marker-start`, `marker-mid`, `marker-end`, `style`, and even direct `href` or `xlink:href` attributes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbodnya29179%2FAngular-Svg-Sprite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbodnya29179%2FAngular-Svg-Sprite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbodnya29179%2FAngular-Svg-Sprite/lists"}