npm package: @lineiconshq/angular-lineicons
Description: Angular components for LineIcons - Free and Pro icon library
Author: LineIcons
Latest version: 1.0.4

# Lineicons Angular — Essential UI Icons for Angular

Lightweight Angular components for [Lineicons](https://lineicons.com).
Easily add scalable SVG icons to your Angular projects with simple inputs for size, color, and stroke.

---

## Installation

```bash
npm install @lineiconshq/angular-lineicons @lineiconshq/free-icons
```

---

## Usage

### Standalone Components

```typescript
import { Component } from '@angular/core';
import { LineiconsComponent } from '@lineiconshq/angular-lineicons';
import { AdobefireflyOutlined,AionlabsOutlined } from '@lineiconshq/free-icons';

@Component({
  selector: 'app',
  imports: [
    LineiconsComponent,
  ],
  template: `
    <div class="grid grid-cols-12 gap-4 md:gap-6">
        <lineicons [icon]="AdobefireflyOutlined" [size]="80" [color]="'blue'"></lineicons>
        <lineicons [icon]="AionlabsOutlined" [size]="80" [color]="'green'"></lineicons>
    </div>
    `
})
export class AppComponent {
  AdobefireflyOutlined = AdobefireflyOutlined;
  AionlabsOutlined = AionlabsOutlined;
}
```

### Module-Based Applications

```typescript
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { LineiconsModule } from '@lineiconshq/angular-lineicons';
import { Home2Outlined, CloudBolt1Bulk} from '@lineiconshq/free-icons';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <lineicons [icon]="Home2Outlined" [size]="24"  [color]="'blue'"> </lineicons>
      <lineicons [icon]="CloudBolt1Bulk" [size]="40" [color]="'orange'"></lineicons>
    </div>
  `
})
export class AppComponent {
  Home2Outlined = Home2Outlined;
  CloudBolt1Bulk = CloudBolt1Bulk;
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LineiconsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

---

### Lineicons Component

```typescript
export interface IconData {
  name: string;
  svg: string;
  viewBox: string;
  defaultFill?: string;
  defaultStroke?: string;
  hasFill: boolean;
  hasStroke: boolean;
  hasStrokeWidth: boolean;
}
```

| Input         | Type                                       | Default        | Description                               |
| ------------- | ------------------------------------------ | -------------- | ----------------------------------------- |
| `icon`        | `IconData`                                 | — *(required)* | The icon data object to render.           |
| `size`        | `number \| string`                         | `24`           | Icon size in pixels or any CSS size unit. |
| `color`        | `string`                                   | `currentColor` | Icon color.                              |
| `strokeWidth` | `number`                                   | `1.5`          | Stroke width for only stroke icons.       |
| `className`   | `string`                                   | `''`           | Optional CSS class.                       |
| `ngStyle`     | `Record<string, string \| number> \| null` | `null`         | Optional inline styles object.            |

All standard SVG attributes are also supported through Angular's attribute binding.

---

## TypeScript Support

Fully typed — includes definitions for the `LineiconsComponent`, `IconData` interface, and all icon exports.

---

## License

* **Free Icons:** [MIT License](https://opensource.org/licenses/MIT)

---

## Links

* [📖 Documentation](https://lineicons.com/docs)
* [💬 Support](https://lineicons.com/support)
* [🔌 Figma Plugin](https://www.figma.com/community/plugin/1217738304122072948/Lineicons)
* [📁 Figma Source](https://www.figma.com/community/file/1198194066179400874)