Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bodnya29179/Angular-Svg-Sprite

🎨 Simplify SVG icon usage in your Angular project! Enhance the flexibility and manageability of your Angular project by using SVG sprites.
https://github.com/bodnya29179/Angular-Svg-Sprite

angular optimization svg-component svg-icons svg-sprites

Last synced: 24 days ago
JSON representation

🎨 Simplify SVG icon usage in your Angular project! Enhance the flexibility and manageability of your Angular project by using SVG sprites.

Awesome Lists containing this project

README 

        
# Angular SVG Sprite



## The aim

The project aims to generate an SVG sprite that enables us to achieve the following objectives:



- Optimize the use of SVG files through the creation of an SVG icon component;

- Allow the editing of SVG files without losing their functionality when using the `` tag.

- Automatically regenerate the SVG sprite when icons are added, edited, or removed, and the app is running.

- Reduce the number of HTTP requests when fetching icons from the assets folder by using a service for loading SVG icons.



## Installation



Run the commands in your project:

* `npm install svg-sprite --save-dev`

* `npm install onchange --save-dev`

* `npm install npm-run-all --save-dev`

* `npm install uuid`



## Steps

### 1. Creating the svg-sprite generation script:

- Script file: [generate-svg-sprite.js](scripts/generate-svg-sprite.js).



Where:

- `ICONS_PATH` is the path where your svg-icons are located;

- `SVG_SPRITE_PATH` is the path where your generated sprite will be located;

- `SVG_SPRITE_FILENAME` is the name of the sprite that you want to save.



### 2. Creating the services that work with sprite:

- Sprite loader service: [sprite-loader.service.ts](src/app/shared/services/sprite-loader/sprite-loader.service.ts);

- Svg service: [svg.service.ts](src/app/shared/services/svg/svg.service.ts).



### 3. Creating the svg-icon component:

- Svg icon component: [svg-icon.component.ts](src/app/shared/components/svg-icon/svg-icon.component.ts).



### 4. Adding the commands to `package.json`:

- `start` allows us to **wait for svg-sprite generation and app startup**, and **begin monitoring svg file changes to regenerate the sprite as needed**:

    ```json

    "start": "npm-run-all --parallel serve watch-sprite"

    ```



- `serve` allows us to **generate the svg-sprite** and run our app:

    ```json

    "serve": "npm run generate-sprite && ng serve"

    ```



- `build` allows us to **prepare the svg-sprite before making the app build** & **build the app**:

    ```json

    "build": "npm run generate-sprite && ng build"

    ```



- `generate-sprite` allows us to **generate the svg-sprite file** by running the script:

    ```json

    "generate-sprite": "node scripts/generate-svg-sprite.js"

    ```



- `watch-sprite` allows us to **listen the svg-icon changes during the running of app** (adding/editing/removing icons, etc.) & **regenerate the sprite build**: 

    ```json

    "watch-sprite": "onchange \"./src/assets/icons/**/*.svg\" --initial --kill -- npm run generate-sprite"

    ```



### 5. Adding svg-icons to the `assets` folder.



### 6. Adding the svg-sprite to the `.gitignore` file for not saving it:

```gitignore

# Auto-generated sprites folder

svg-sprite.svg

```



### 7. Using the svg-icon component:

Adding icons to template:

```html

">

```



Changing icon styles (optional):



- Way #1: Changing colors by ::ng-deep.



  ```scss

  svg-icon::ng-deep {

    svg path {

      fill: ;

    }

  }

  ```

  or

  ```scss

  svg-icon::ng-deep {

    svg path {

      stroke: ;

    }

  }

  ```

  

- Way #2: Changing colors by font color of the parent element.



  ```svg

  

    

    

    

    

  

  ```

  and setting the font color in CSS / SCSS / SASS / Less.

  ```scss

  svg-icon {

    color: ;

  }

  ```



The usage of `fill` or `stroke` depends on the `` type in the svg file.



### Handling Gradient IDs



During sprite generation, we ensure that all linear and radial gradient IDs in SVGs are

unique to prevent conflicts when multiple icons use gradients. This prevents issues with color references when

multiple SVGs are displayed, ensuring that each SVG maintains its intended gradient coloring even if others are added or

removed from the DOM.



### ✨ New Features: Handling Unique IDs in SVGs



We have enhanced the way SVGs are processed during sprite generation:



- **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`.

- **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.