angular tabler icons

Angular-tabler-icons

คำอธิบาย

แพ็คเกจนี้ช่วยให้คุณสามารถใช้ไอคอนแท็บเลอร์ในแอปพลิเคชันเชิงมุมของคุณ Tabler Icons เป็นชุดไอคอน SVG คุณภาพสูงที่ได้รับอนุญาตจาก MIT ฟรีเพื่อให้คุณใช้ในโครงการเว็บของคุณ ไอคอนแต่ละตัวได้รับการออกแบบบนกริด 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

รุ่นนี้มี ไอคอน Tabler v3.26.0 ดูการเปลี่ยนแปลงเพื่อทราบว่ามีไอคอนใดบ้าง

ไอคอนสไตล์

แต่ละไอคอนสามารถจัดสไตล์แยกต่างหากด้วย 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>
• ไอคอนที่คุณต้องการ

เราใส่สิ่งนี้ไว้ในไอคอนโมเดลเพื่อโมดูลาร์ ดูตัวอย่างด้านล่าง:

ไฟล์: 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. ไอคอนนำเข้าโมดูล

หากคุณใช้ 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. ใช้ในเทมเพลต

หลังจากนำเข้า ไอคอนโมดูล ในคุณสมบัติของคุณหรือโมดูลที่ใช้ร่วมกันให้ใช้ไอคอนดังนี้:

 < 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 

วิธีการสร้างใหม่สำหรับรุ่นไอคอน Tabler รุ่นใหม่

1. เรียกใช้ GitHub Actions Workflow Automatic PR on Tabler Icons Release พร้อมรุ่นไอคอน TABLER ใหม่ (เช่น 2.40.0 ) เวิร์กโฟลว์นี้จะสร้างคำขอดึงใหม่โดยอัตโนมัติ
2. อนุมัติและรวมคำขอดึงที่สร้างขึ้น
3. สร้างรุ่น/แท็กด้วยไอคอน Tabler ใหม่

แพ็คเกจจะถูกสร้างใหม่และเผยแพร่โดยอัตโนมัติด้วยการดำเนินการของ GitHub Workflow Build and Publish package

ผู้มีส่วนร่วม

ขอบคุณไปที่คนที่ยอดเยี่ยมเหล่านี้ (คีย์อีโมจิ):

ปิแอร์ -

Arjen Althoff -

Jan Schab

โครงการนี้เป็นไปตามข้อกำหนดทั้งหมดของผู้เข้าร่วม การมีส่วนร่วมทุกชนิดยินดีต้อนรับ!