angular tabler icons

Angular-Tabler-icons

描述

此软件包允许您在角度应用中使用表格图标。表图标是一组免费的MIT许可的高质量SVG图标，供您在Web项目中使用。每个图标均在24x24网格和2PX中风上设计。

安装

1。安装软件包

npm install angular-tabler-icons
# or
yarn add angular-tabler-icons

用法

独立

如果您使用独立组件，请使用provideTablerIcons()

成分

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

@ Component ( {
  selector : 'app-standalone' ,
  imports : [ TablerIconComponent ] ,
  /**
   * Provide the icons which you want to use in this component.
   */
  providers : [
    provideTablerIcons ( {
      IconNumber123 ,
      IconAdOff ,
      IconHeartFilled ,
    } ) ,
  ] ,
,
} )
export class StandaloneComponent { } 

html

 < fieldset >
  < legend > 123 </ legend >
  < i-tabler name =" number-123 " > </ i-tabler >
</ fieldset >

< fieldset >
  < legend > 123 (style, big) </ legend >
  < i-tabler name =" number-123 " style =" height: 60px; width: 60px; " > </ i-tabler >
</ fieldset >

< fieldset >
  < legend > ad-off (style, red) </ legend >
  < i-tabler name =" ad-off " style =" color: red; " > </ i-tabler >
</ fieldset >

< fieldset >
  < legend > heart-filled (style, red) </ legend >
  < i-tabler name =" heart-filled " style =" color: red; " > </ i-tabler >
</ fieldset > 

可用图标

可用图标列表：https：//tabler.io/icons

此版本包括表图标v3.26.0 ，请参见ChangElog以了解哪些图标可用。

样式图标

每个图标都可以用CSS分别进行样式：

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

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

. fill-red {
  fill : red;
}

. stroke-blue {
  color : blue;
}

. thin {
  stroke-width : 1 px ;
}

选项

一些选项可用于配置模块：

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

@ NgModule ( {
  imports : [
    TablerIconsModule . pick ( TablerIcons , {
      // Ignore warnings, such as "Tabler Icon not found", for example:
      //   ignoreWarnings: environment.production,
      ignoreWarnings : true ,
    } ) ,
  ] ,
  exports : [ TablerIconsModule ] ,
} )
export class IconsModule { } 

选择所有图标

您可以通过执行以下操作立即导入所有图标。但是，请记住，这样做，所有图标都将最终出现在您的应用程序捆绑包中。虽然这可能不是原型制作的问题，但不建议您打算发布任何应用程序。

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

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

ngmodule（遗产）

1。生成一个模块以托管您将导入的图标

ng generate module icons

2。进口资产

您需要导入：

• tablericonsModule，因为它包含<i-tabler>组件
• 您需要的图标

我们将其放在IconsModule中以进行模块化。请参阅下面的示例：

文件：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。导入iConsModule

如果您使用的是ngmodules，请以这种方式导入：

 import { NgModule } from "@angular/core" ;
import { MyComponent } from "./my/my.component" ;
import { IconsModule } from "./icons.module" ;

@ NgModule ( {
  declarations : [ MyComponent ] ,
  imports : [
    IconsModule , // <--- Here
  ] ,
} )
export class MyModule { }

4。在模板中使用它

在您的功能或共享模块中导入ICONSMODULE后，使用以下图标：

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

角版兼容性

角	Angular-Tabler-icons
18＆19	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+

贡献

随时报告问题或为该项目做出贡献！以下是一些开始的提示：

yarn lib:generate  # generate components from Tabler Icons
yarn lib:build  # build angular library 

如何重建新的表图标版本

1. Automatic PR on Tabler Icons Release ，并带有新的表图标版本（例如2.40.0 ）。此工作流将自动创建一个新的拉请请求。
2. 批准并合并生成的拉请请求。
3. 使用新的表图标版本创建版本/标签。

软件包将自动重建和发布，其中包括GitHub Actions Workflow Build and Publish package 。

贡献者

谢谢这些好人（表情符号钥匙）：

皮埃尔 ？

Arjen Althoff ？

Jan Schab

该项目遵循全企业规范。欢迎任何形式的贡献！