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

該項目遵循全企業規範。歡迎任何形式的貢獻！