npm package: @masterteam/icons
Description: A lightweight, performant, and easy-to-use SVG icon library for modern Angular applications.
Latest version: 0.0.14

# @masterteam/icons

A lightweight, performant, and easy-to-use SVG icon library for modern Angular applications.

`@masterteam/icons` serves a generated SVG map for Angular applications without heavy dependencies. Icons render from a single asset request instead of triggering one network request per icon name.

## ✨ Features

  * **Featherweight:** No external dependencies besides Angular itself.
  * **Single Asset Request:** Icons are emitted into one generated JSON asset, avoiding per-icon HTTP requests.
  * **Stable Runtime Cost:** Repeated icon usage reuses the same loaded icon map instead of creating additional icon fetches.
  * **Easy to Style:** Effortlessly control icon size and color using standard CSS properties.
  * **Modern Angular:** Built with Standalone Components and Signals for a simple, declarative API.

-----

## 📦 Installation

```bash
pnpm add @masterteam/icons
```

-----

## ⚙️ Setup

Follow these two steps to get `@masterteam/icons` working in your application.

#### 1\. Import the Component

The `Icon` is `standalone`, so you can import it directly into any component or module where you need it.

```typescript
// in your-component.ts
import { Component } from '@angular/core';
import { Icon } from '@masterteam/icons';

@Component({
  selector: 'app-my-feature',
  standalone: true,
  imports: [
    Icon // <-- Import here
  ],
  template: `
    <h2>My Feature</h2>
    <mt-icon icon="home"></mt-icon>
  `,
})
export class MyFeatureComponent {}
```

#### 2\. Configure Assets in `angular.json`

For the library's icons to be available to your application, you must configure your `angular.json` file to copy them into your project's build assets.

```json
// in angular.json
"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "src/assets",
            "src/favicon.ico",
            {
              "glob": "**/*",
              "input": "./node_modules/@masterteam/icons/assets/",
              "output": "/assets/"
            }
          ],
          // ...
        }
      }
    }
  }
}
```

-----

## 🚀 Usage

Use the `<mt-icon>` component and pass the name of the icon (without the `.svg` extension) from the library's provided set.

```html
<p>
  Welcome to the <mt-icon icon="home"></mt-icon> dashboard!
</p>

<button>
  <mt-icon icon="settings"></mt-icon>
  Go to Settings
</button>

<button style="color: red;">
  <mt-icon icon="trash"></mt-icon>
  Delete Item
</button>
```

-----

## 🎨 Styling

Styling icons is intuitive and works with standard CSS. For best results, the library's source SVGs have their `fill` attribute set to `currentColor`.

#### Changing Color

Icons inherit their color from the parent CSS `color` property.

```css
/* Styles for a component using the icon */
.delete-button {
  color: #E53E3E; /* Red */
}

.delete-button:hover {
  color: #C53030; /* Darker Red */
}
```

```html
<button class="delete-button">
  <mt-icon icon="trash"></mt-icon>
  Delete
</button>
```

#### Changing Size

The easiest way to control size is by setting the `font-size` on the component or a parent element. The icon will scale proportionally.

```css
.profile-header {
  font-size: 3rem; /* The icon will be 3rem x 3rem */
}
```

```html
<div class="profile-header">
  <mt-icon icon="user-circle"></mt-icon> Welcome Back
</div>
```

-----

## ⚙️ API Reference

| Input  | Type     | Required | Description                                                    |
| :----- | :------- | :------- | :------------------------------------------------------------- |
| `icon` | `string` | Yes      | The name of the icon file (without `.svg`) provided by the library. |

-----

## 🤝 Contributing

Contributions are welcome\! Please feel free to open an issue or submit a pull request.

## 📄 License

This project is licensed under the MIT License.