angular-tabler-icons

Description

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

This package is inspired of angular-feather, thank you to the author.

Usage

1. Install the package

npm install angular-tabler-icons

2. Generate a module to host the icons you'll import

ng generate module icons

3. Import assets

You need to import:

• TablerIconsModule, as it contains the <i-tabler> component
• The icons that you need

We put this in IconsModule for modularity. See example below:

file: icon.module.ts

import { NgModule } from '@angular/core';

import { TablerIconsModule } from 'angular-tabler-icons';
import { IconCamera, IconHeart, IconBrandGithub } from 'angular-tabler-icons/icons';

// Select some icons (use an object, not an array)
const icons = {
  IconCamera,
  IconHeart,
  IconBrandGithub
};

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

// NOTES:
// 1. We add TablerIconsModule to the 'exports', since the <i-tabler> component will be used in templates of parent module
// 2. Don't forget to pick some icons using TablerIconsModule.pick({ ... })

3. Use it in template

After importing the IconsModule in your feature or shared module, use the icons as follows:

<i-tabler name="brand-github" class="someclass"></i-feather>
<i-tabler name="heart" style="color: green;"></i-feather>
<i-tabler name="camera"></i-feather>

Available icons

Available icons: https://tabler-icons.io/

This version includes Tabler Icons v1.41.1,
see changelog to know which icons are available.

Styling icons

<i-tabler name="heart" class="big fill-red"></i-feather>

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

.fill-red {
  fill: red;
}

Pick all icons

You can easily import all icons at once by doing the following.

import { TablerIconsModule } from 'angular-tabler-icons';
import * as TablerIcons from 'angular-tabler-icons/icons';

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

However, keep in mind that by doing this, all icons will end up in your application bundle. While this may not be much of an issue for prototyping, it is not recommended for any application that you plan to release.

Contributing

Feel free to report issues or to contibute to this project!
Here are few tips to start:

$ npm run lib:generate  # generate components from Tabler Icons
$ npm run lib:build  # build angular library