Awesome

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 <img/> 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.

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;
• Svg service: svg.service.ts.

3. Creating the svg-icon component:

• Svg icon component: svg-icon.component.ts.

4. Adding the commands to package.json:

• start allows us to <ins>wait for svg-sprite generation and app startup</ins>, and <ins>begin monitoring svg file changes to regenerate the sprite as needed</ins>:

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

• serve allows us to <ins>generate the svg-sprite</ins> and run our app:

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

• build allows us to <ins>prepare the svg-sprite before making the app build</ins> & <ins>build the app</ins>:

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

• generate-sprite allows us to <ins>generate the svg-sprite file</ins> by running the script:

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

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

  "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:

# Auto-generated sprites folder
svg-sprite.svg

7. Using the svg-icon component:

Adding icons to template:

<svg-icon [src]="<your-icon-name-here>"></svg-icon>

Changing icon styles (optional):

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

  svg-icon::ng-deep {
    svg path {
      fill: <some-color-here>;
    }
  }
  

  or

  svg-icon::ng-deep {
    svg path {
      stroke: <some-color-here>;
    }
  }
  

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

  <svg xmlns="http://www.w3.org/2000/svg" ...>
    <!-- fill -->
    <path fill="currentColor" ... />
    <!-- or stroke -->
    <rect stroke="currentColor" ... />
  </svg>
  

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

  svg-icon {
    color: <some-color-here>;
  }
  

The usage of fill or stroke depends on the <path> type in the svg file.

Handling Gradient IDs

During sprite generation, we <ins>ensure that all linear and radial gradient IDs in SVGs are unique</ins> 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.