https://github.com/anedomansky/ngx-icon

An Angular component for displaying SVG icons.
https://github.com/anedomansky/ngx-icon

Last synced: 23 days ago
JSON representation

An Angular component for displaying SVG icons.

• Host: GitHub
• URL: https://github.com/anedomansky/ngx-icon
• Owner: anedomansky
• License: mit
• Created: 2023-12-18T19:06:10.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-04-07T13:51:15.000Z (8 months ago)
• Last Synced: 2024-11-13T11:38:01.133Z (29 days ago)
• Language: TypeScript
• Size: 638 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ngx-icon - An Angular component for displaying SVG icons. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-icon - An Angular component for displaying SVG icons. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-icon - An Angular component for displaying SVG icons. (Table of contents / Third Party Components)

README

        
# Ngx-icon

[![npm version](https://badge.fury.io/js/@anedomansky%2Fngx-icon.svg)](https://badge.fury.io/js/@anedomansky%2Fngx-icon)

An Angular component for displaying SVG icons.

## Features

- display any SVG icon

- add custom CSS to the SVG icons

- automatic caching of previously added icons

## Dependencies

| ngx-icon | Angular |

| -------- | ------- |

| current  | >= 16   |

## Installation

```cli

npm install @anedomansky/ngx-icon

```

## Setup

You have to add all your icons to the `NgxIconService` in order to display them.

Please remove all `height` and `width` attributes from the `` element beforehand.

Furthermore, you have to provide the `HttpClient` in your application.

`main.ts`:

```ts

import { NgxIconService } from "@anedomansky/ngx-icon";

import { provideHttpClient } from "@angular/common/http";

import { APP_INITIALIZER } from "@angular/core";

import { bootstrapApplication } from "@angular/platform-browser";

import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, {

  providers: [

    provideHttpClient(),

    {

      provide: APP_INITIALIZER,

      useFactory: (iconService: NgxIconService) => () => {

        iconService.addIcon("cart", "assets/");

        iconService.addIcon("camera", "assets/");

      },

      deps: [NgxIconService],

      multi: true,

    },

  ],

});

```

## Usage

`app.component.html`:

```html



  

  



```


`app.component.ts`:

```ts

import { NgxIconComponent } from "@anedomansky/ngx-icon";

import { Component } from "@angular/core";

@Component({

  selector: "app-root",

  templateUrl: "./app.component.html",

  styleUrls: ["./app.component.scss"],

  standalone: true,

  imports: [NgxIconComponent],

})

export class AppComponent {}

```

## Customization

You can alter the appearance (height, width, etc.) of the icons.

Additionally, there is a CSS Custom Property for the icon's `height` that can easily be updated.

`app.component.scss`:

```scss

.app ::ng-deep ngx-icon {

  --ngx-icon-size: 2rem;

}

```