angular-tabler-icons

English | 中文

📚 Table of Contents

• Description
• Installation
• Quick Start
• Usage Guide
  • Standalone Components
  • NgModule (Legacy)
• Styling Icons
• Configuration
• Angular Version Compatibility
• Development & Contributing
• Contributors

Description

This is a fork of angular-tabler-icons. The original project is no longer actively maintained, so this version continues development and maintenance.

This package allows you to use the Tabler Icons in your Angular applications. Tabler Icons is a set of free MIT-licensed, high-quality SVG icons for use in web projects. Each icon is designed on a 24x24 grid with a 2px stroke.

Quick Links:

• 📦 NPM Package
• 🎨 Live Demo
• 📖 Icon Library

Features:

• 🎨 5000+ high-quality SVG icons
• 📦 Tree-shakeable - import only what you use
• 🎯 Works with Angular 12+
• ⚡ Lightweight and performant
• 🎭 Easy to customize with CSS

Installation

Install the package via npm:

npm install @luoxiao123/angular-tabler-icons

Quick Start

For Standalone Components (Recommended)

import { Component } from '@angular/core';
import { TablerIconComponent, provideTablerIcons } from '@luoxiao123/angular-tabler-icons';
import { IconCamera, IconHeart } from '@luoxiao123/angular-tabler-icons/icons';

@Component({
  selector: 'app-root',
  imports: [TablerIconComponent],
  providers: [
    provideTablerIcons({
      IconCamera,
      IconHeart,
    }),
  ],
  template: `
    <i-tabler name="camera"></i-tabler>
    <i-tabler name="heart" style="color: red;"></i-tabler>
  `,
})
export class AppComponent {}

For NgModule Projects

import { NgModule } from '@angular/core';
import { TablerIconsModule } from '@luoxiao123/angular-tabler-icons';
import { IconCamera, IconHeart } from '@luoxiao123/angular-tabler-icons/icons';

const icons = {
  IconCamera,
  IconHeart,
};

@NgModule({
  imports: [TablerIconsModule.pick(icons)],
  exports: [TablerIconsModule],
})
export class IconsModule {}

Then use in your templates:

<i-tabler name="camera"></i-tabler>
<i-tabler name="heart" style="color: red;"></i-tabler>

Usage Guide

Standalone Components

If you are using Standalone Components, use the provideTablerIcons() function.

Component Example

import { Component } from '@angular/core';
import { TablerIconComponent, provideTablerIcons } from '@luoxiao123/angular-tabler-icons';
import {
  IconNumber123,
  IconAdOff,
  IconHeartFilled,
} from '@luoxiao123/angular-tabler-icons/icons';

@Component({
  selector: 'app-standalone',
  imports: [TablerIconComponent],
  providers: [
    provideTablerIcons({
      IconNumber123,
      IconAdOff,
      IconHeartFilled,
    }),
  ],
  template: `
    <div>
      <i-tabler name="number-123"></i-tabler>
      <i-tabler name="number-123" style="height: 60px; width: 60px;"></i-tabler>
      <i-tabler name="ad-off" style="color: red;"></i-tabler>
      <i-tabler name="heart-filled" style="color: red;"></i-tabler>
    </div>
  `,
})
export class StandaloneComponent {}

## Available Icons

Browse all available icons: <https://tabler.io/icons>

This version includes **Tabler Icons v3.41.0**. For a complete list of changes, see the [changelog](https://tabler.io/icons/changelog).

## Styling Icons

All icons can be styled individually using CSS. Customize them with classes or inline styles:

```html
<i-tabler name="camera" class="big fill-red stroke-blue thin"></i-tabler>

.big {
  height: 50px;
  width: 50px;
}

.fill-red {
  fill: red;
}

.stroke-blue {
  color: blue;
}

.thin {
  stroke-width: 1px;
}

Styling Tips:

• Use width and height for resizing
• Use color property to change stroke color
• Use fill property to change fill color
• Combine multiple classes for complex styling

Configuration

Module Options

Configure the module with optional settings:

import { environment } from "../environments/environment";
import { TablerIconsModule } from "@luoxiao123/angular-tabler-icons";
import * as TablerIcons from "@luoxiao123/angular-tabler-icons/icons";

@NgModule({
  imports: [
    TablerIconsModule.pick(TablerIcons, {
      // Suppress warnings (e.g., "Tabler Icon not found")
      ignoreWarnings: environment.production,
    }),
  ],
  exports: [TablerIconsModule],
})
export class IconsModule {}

Importing All Icons

⚠️ Warning: Importing all icons will increase your bundle size significantly. This is only recommended for prototyping.

import { TablerIconsModule } from "@luoxiao123/angular-tabler-icons";
import * as TablerIcons from "@luoxiao123/angular-tabler-icons/icons";

@NgModule({
  imports: [TablerIconsModule.pick(TablerIcons)],
  exports: [TablerIconsModule],
})
export class IconsModule {}

Angular Version Compatibility

| Angular Version | Package Version | | :---: | :---: | | 21 | 3.35.2+ | | 18-20 | 3.22.0+ | | 17 | 2.40.1+ | | 16 | 2.21.1+ | | 15 | 1.117.1+ | | 14 | 1.72.1+ | | 13 | 1.53.1+ | | 12 | 1.41.3+ | | 11 | 1.41.0+ |

Development & Contributing

We welcome contributions! Whether it's bug reports, feature requests, or pull requests, all contributions are appreciated.

Getting Started with Development

1. Clone the repository
2. Install dependencies: npm install
3. Start development server: npm run start

Common Tasks

# Generate components from latest Tabler Icons
npm run lib:generate

# Build the library for production
npm run lib:build

# Run tests
npm test

# Run linter
npm lint

Workflow for New Tabler Icons Versions

The update process is fully automated:

1. When a new Tabler Icons version is released, GitHub Actions automatically creates a PR
2. Review and merge the generated Pull Request
3. Create a release tag with the new Tabler Icons version
4. The package is automatically built and published to npm

Contributors ✨

Thanks goes to these wonderful people who have contributed to this project:

This project follows the all-contributors specification. Contributions of any kind are welcome! For information on how to contribute, check the Contributing guide.

License

This project is licensed under the MIT License. See the LICENSE file for details.