Reicon Angular

Angular icon components for 2680+ icons in 2 weights (Outline & Filled) — tree-shakeable, TypeScript-ready, zero config.

Install

npm i reicon-angular
# or
bun add reicon-angular

Usage

First, add the components to your standalone component imports:

import { Component } from '@angular/core';
import { Home, ShieldCheck, AltArrowDown } from 'reicon-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Home, ShieldCheck, AltArrowDown],
  template: `
    <reicon-home></reicon-home>
    <reicon-shield-check [size]="32" color="#d97757"></reicon-shield-check>
    <reicon-alt-arrow-down weight="Filled"></reicon-alt-arrow-down>
  `
})
export class AppComponent {}

Inputs

| Input | Type | Default | Description | |------|------|---------|-------------| | size | number | string | 24 | Icon size (number = px) | | color | string | currentColor | Primary icon color | | weight | 'Outline' | 'Filled' | Outline | Icon weight / style | | strokeWidth | number | string | — | Override stroke width |

Styling

Standard Angular 'class' and 'style' bindings work natively directly on the host element:

<reicon-home class="my-icon-class" [style.margin-left.px]="8"></reicon-home>

Weights

• Outline — clean outlined style (default)
• Filled — solid filled style

<reicon-home></reicon-home>                          <!-- Outline (default) -->
<reicon-home weight="Filled"></reicon-home>          <!-- Filled -->
<reicon-home weight="Filled" color="red"></reicon-home>

Icon Names

Icons use PascalCase class names derived from their kebab-case originals:

| Original | Class Component | Selector | |----------|-----------------|----------| | home | Home | reicon-home | | shield-check | ShieldCheck | reicon-shield-check | | alt-arrow-down | AltArrowDown | reicon-alt-arrow-down |

License

MIT © devchauhan