@spremi/svg-icon

A simple, yet customizable, module to add SVG icons in Angular 6+ applications.

The icons are included inline. So, they can be manipulated via CSS.

Demo on StackBlitz.

Features

• Small footprint.
• No icon registration required.
• Provides a blank icon for specified size.
  • Can be used as filler.
• Provides an error icon - used when specified SVG icon is not found.
  • Developers can spot missing icons easily.
• [NEW] Dynamically change input params.
  • See example in StackBlitz.
• Customizable
  • Set specific icon size.
  • Scale icon by a factor.
  • Set fill color for error icons.
    • Makes it easy to spot missing icons in any theme.
  • Set own error icon.
    • Use failures as opportunity with branded error icons.

Stability

Beta

• Features can be demonstrated.
  • Optimization is possible.
• Documentation almost complete.
• No test cases.
  • But sample application covers many usage scenarios.
• Issues/ limitations not known.

Installation

npm

npm install --save @spremi/svg-icon

yarn

yarn add @spremi/svg-icon

Dependencies

import { HttpClientModule } from '@angular/common/http';

...later, add it to imports:

imports: [BrowserModule, HttpClientModule],

How to use

Import the module

In app.module.ts, import SvgIconModule.

• Also import HttpClientModule, if not already.

import { SvgIconModule } from '@spremi/svg-icon';

@NgModule({
  declarations: [...],
  imports: [BrowserModule, HttpClientModule, SvgIconModule.forRoot()],
  providers: [...],
  bootstrap: [...],
})
export class AppModule {}

Add icons to the project

Add icons to a sub-directory that can be accessed at runtime.

In the projects generated via @angular/cli, the sub-directory src/assets can be accessed as /assets.

Update HTML template

Add icon as-is:

<ang-svg-icon url="/assets/my_icon.svg"></ang-svg-icon>

Add icon with width and height set as 24 pixels:

<ang-svg-icon url="/assets/my_icon.svg" width="24" height="24"></ang-svg-icon>

Add icon and scale it 2x:

<ang-svg-icon url="/assets/my_icon.svg" scale="2"></ang-svg-icon>

Note:

• For scale to work, original SVG must specify a size (width & height).
• If scale is specified, it takes precedence over width and height.

How to customize

We need to import SvgIconService as well.

import { SvgIconModule, SvgIconService } from '@spremi/svg-icon';

Set custom fill color for error icons

export class AppModule {
  constructor(private iconSvc: SvgIconService) {
    this.iconSvc.setErrorFill('purple');
  }
}

Set custom error SVG

Add markup for the custom error SVG.

• Ensure it has viewBox defined, so that it scales well.
• Change width and height to %WIDTH% and %HEIGHT% as shown below.

const CUST_ERROR = `<svg xmlns="http://www.w3.org/2000/svg"
  width="%WIDTH%" height="%HEIGHT%" viewBox="0 0 24 24">
  ...
  ...
  </svg >`;

export class AppModule {
  constructor(private iconSvc: SvgIconService) {
    this.iconSvc.setErrorTemplate(CUST_ERROR);
  }
}

License

BSD-3-Clause Copyright Sanjeev Premi