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

<svg-icon> displays SVG icons by directly inlining the SVG content into the DOM as a child of itself. This approach offers an advantage over an tag or a CSS background-image because it allows styling the SVG with CSS.

For example, the default color of the SVG content is the CSS currentColor value. This makes SVG icons by default have the same color as surrounding text and allows you to change the color by setting the color style on the svg-icon element.

Installation

ng add @ngneat/svg-icon

The command will automatically do the following steps for you.

Recommended Flow

Icons Preparation

• Add the icons to src/assets/svg
• Use svg-to-ts to clean and extract the icons content:

{
  "scripts": {
    "generate-icons": "svg-to-ts"
  },
  "svg-to-ts": {
    "conversionType": "object",
    "srcFiles": [
      "./src/assets/svg/*.svg"
    ],
    "outputDirectory": "./src/assets/svg",
    "fileName": "svg-icons",
    "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 icons from '../assets/svg/svg-icons';

@NgModule({
  imports: [
    SvgIconsModule.forRoot({
      icons
    })
  ],
  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>

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

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

And use the size input:

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

SvgIconRegistry

You can inject the SvgIconRegistry, and use it to insert new SVG icons or get them:

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

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!