SaulMoro/svg-icon

A lightweight library that makes it easier to use SVG icons in your Angular Application

The svg-icon library enables using the <svg-icon> tag to directly display SVG icons in the DOM. This approach offers an advantage over using an <img> tag or via the CSS background-image property, because it allows styling and animating the SVG with CSS.

For example, if the fill or stroke properties of elements in the svg are set to currentColor, they will have the color defined for the containing DOM element,. So the color can easily be changed by changing the color style on the svg-icon element.

Installation

ng add @ngneat/svg-icon

This command will automatically preform the recommended flow (steps 2-4).

Recommended Flow

Icons Preparation

Add the icons to src/assets/svg

Use @ngneat/svg-generator to clean and extract the icons content:

{
 "scripts": {
   "generate-icons": "svgGenerator"
 },
 "svgGenerator": {
   "outputPath": "./src/app/svg",
   "prefix": "app",
   "srcPath": "./src/assets/svg",
   "outputDirectory": "./src/app",
   "svgoConfig": {
     "plugins": [
       {
         "removeDimensions": true,
         "cleanupAttrs": true
       }
     ]
   }
 }
}

Run npm run generate-icons

Icons Rendering

Import the SvgIconsModule in your AppModule, and register the icons:

import { SvgIconsModule } from '@ngneat/svg-icon';

import { appSettings } from '../svg';

@NgModule({
  imports: [
    SvgIconsModule.forRoot({
      icons: [appSettings]
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now you can use the svg-icon component:

<svg-icon key="settings"></svg-icon> <svg-icon key="settings" color="hotpink" fontSize="40px"></svg-icon>

In lazy load modules, you can use the forChild method:

import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './dashboard.component';
import { appSettings } from '../svg/app-settings.icon';
import { SvgIconsModule } from '@ngneat/svg-icon';

@NgModule({
  declarations: [DashboardComponent],
  imports: [CommonModule, DashboardRoutingModule, SvgIconsModule.forChild([appSettings])]
})
export class DashboardModule {}

Icon Sizing

To control the SVG size, we use the font-size property as described in this article. You also have the option to pass fixed sizes and use them across the application:

@NgModule({
  imports: [
    SvgIconsModule.forRoot({
      sizes: {
        xs: '10px',
        sm: '12px',
        md: '16px',
        lg: '20px',
        xl: '25px',
        xxl: '30px'
      },
      defaultSize: 'md'
      icons
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

They are used in the size input:

<svg-icon key="settings" size="lg"></svg-icon>

SvgIconRegistry

You can inject the SvgIconRegistry, and get existing SVG icons or register new ones:

import { SvgIconRegistry } from '@ngneat/svg-icon';

interface Icon {
  name: string;
  data: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private registry: SvgIconRegistry) {
    registry.register([Icon, Icon, Icon]);
    registry.register(Icon);
    registry.get(name);
    registry.getAll();
  }
}