# @team23/ng-icon-component

> An icon component which uses a svg symbols file to display icons as inline svgs

Latest version **1.0.0** (published 2018-07-06) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @team23/ng-icon-component
pnpm add @team23/ng-icon-component
yarn add @team23/ng-icon-component
bun add @team23/ng-icon-component
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-07-06 |
| First published | 2018-07-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | TEAM23 |
| Maintainers | ademeter |
| Keywords | angular, svg, icons |

## Links

- npm: https://www.npmjs.com/package/@team23/ng-icon-component
- Homepage: https://www.team23.de/
- npm.io page: https://npm.io/package/@team23/ng-icon-component

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-07-06

## README

# Icon Module

## Include in Project

### AppModule
```typescript
providers: [
    ...,
    IconModule.forRoot()
]
```


### AppComponent
Initialize Icon Service in Root Component
- define getter for icon ID
- (optional) define all available Icon Sizes
- (optionsl) define icon src (default: 'assets/images/icons/symbol/icons-symbols.svg')

```typescript
    this.iconService
        .setIdFunction((component: AbstractIconModel) => {
            return `icon-${component.size}-px-color-${component.name}`;
        })
        .setIconSizes([16, 20, 24])
        .setIconSrc('assets/images/icons/symbol/icons-symbols.svg');
```

### Every other Module that needs an icon to display
Similar to the SharedModule the IconModule needs to be included in every Module that uses the IconComponent
```typescript
providers: [
    ...,
    IconModule
]
```

## Usage

```html
<t23-icon [name]="name" [size]="size" [src]="src"></t23-icon>
```

---
_Source: https://npm.io/package/@team23/ng-icon-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._