https://github.com/navix/icong

🦍 Efficient Angular SVG Icons.
https://github.com/navix/icong

angular icons svg svg-icons

Last synced: about 2 months ago
JSON representation

🦍 Efficient Angular SVG Icons.

• Host: GitHub
• URL: https://github.com/navix/icong
• Owner: navix
• License: mit
• Created: 2020-01-31T10:58:54.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-08-03T14:14:37.000Z (over 2 years ago)
• Last Synced: 2025-08-23T16:01:45.485Z (8 months ago)
• Topics: angular, icons, svg, svg-icons
• Language: TypeScript
• Homepage:
• Size: 974 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![npm version](https://badge.fury.io/js/icong.svg)](https://www.npmjs.com/package/icong)

![CI](https://github.com/navix/icong/actions/workflows/ci.yml/badge.svg)

# 🦍 icong

## Efficient Angular SVG Icons

Renders icons as symbols in the host, and displays them via `use[href]`.

Inspired by this article: https://css-tricks.com/too-many-svgs-clogging-up-your-markup-try-use/

**Features:**

* Renders icons only once in the DOM, then re-use.

* Load SVG by url or use XML directly.

* Lazy-rendering and lazy-loading.

* No additional wrapper components, direct access to `svg` element.

* No magic coloring or sizing.

* SSR support.

> [StackBlitz demo](https://stackblitz.com/edit/icong-demo?file=src/app/app.component.ts)

## Installation

```

$ npm i icong

```

## Usage

Import the module.

```

import { IconModule } from 'icong';

...

@NgModule({

  imports: [

    ...

    IconModule,

```

Place host for symbols rendering (in the root or other shared place). It is invisible.

```html

```

Add icons to registry.

```typescript

import { IconsRegistry } from 'icong';

...

constructor(

  private iconsRegistry: IconsRegistry,

) {}

...

this.iconsRegistry.add({name: 'home', xml: '

```

### Color

Icong does not apply any additional changes to the `sgv` code or to the wrappers. You need to manage colors yourself.

I prefer to change `fill` attribute in the `svg` from particular color to `currentColor`. 

### Size

Icons are too different: in sizes, proportions, boldness etc. Then we need to place them in very different environments.

A non-generalized solution works good here, I prefer to define `svg` sizes in CSS.

You always can create a wrapper component or directive that will solve exactly your issue.