Unduh angular tabler icons - Unduh Kode Sumber angular tabler icons

angular tabler icons

Komponen pihak ketiga

v3.26.0 - Tabler Icons v3.26

Unduh

Icon-Tabler-Icons

Keterangan

Paket ini memungkinkan Anda untuk menggunakan ikon tabler di aplikasi sudut Anda. Ikon Tabler adalah satu set ikon SVG berkualitas tinggi yang dilisensikan MIT untuk Anda gunakan dalam proyek web Anda. Setiap ikon dirancang pada kisi 24x24 dan stroke 2px.

Memasang

1. Instal paket

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

Penggunaan

Mandiri

Jika Anda menggunakan komponen mandiri, gunakan provideTablerIcons()

Komponen

 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 >

Ikon yang tersedia

Daftar ikon yang tersedia: https://tabler.io/icons

Versi ini termasuk Ikon Tabler v3.26.0 , lihat Changelog untuk mengetahui ikon mana yang tersedia.

Ikon penata gaya

Setiap ikon dapat ditata secara terpisah dengan 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 ;
}

Opsi

Beberapa opsi tersedia untuk mengonfigurasi modul:

 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 { }

Pilih semua ikon

Anda dapat mengimpor semua ikon sekaligus dengan melakukan hal berikut. Namun, perlu diingat bahwa dengan melakukan ini, semua ikon akan berakhir di bundel aplikasi Anda. Meskipun ini mungkin tidak banyak masalah untuk membuat prototipe, tidak disarankan untuk aplikasi apa pun yang Anda rencanakan untuk dirilis .

 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 (Legacy)

1. Hasilkan modul untuk meng -host ikon yang akan Anda impor

ng generate module icons

2. Aset impor

Anda perlu mengimpor:

TablericonsModule, karena berisi komponen <i-tabler>
Ikon yang Anda butuhkan

Kami menempatkan ini di IconsModule untuk modularitas. Lihat contoh di bawah ini:

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. Impor Iconsmodule

Jika Anda menggunakan ngmodules, impor dengan cara ini:

 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. Gunakan dalam template

Setelah mengimpor IconsModule di fitur Anda atau modul bersama, gunakan ikon sebagai berikut:

 < 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 >

Kompatibilitas versi sudut

Angular	Icon-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+

Berkontribusi

Jangan ragu untuk melaporkan masalah atau berkontribusi pada proyek ini! Berikut beberapa tips untuk memulai:

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

Cara membangun kembali untuk versi ikon tabler yang lebih baru

Jalankan Github Action Workflow Automatic PR on Tabler Icons Release , dengan Versi Ikon Tabler Baru (mis. 2.40.0 ). Alur kerja ini akan membuat secara otomatis permintaan tarik baru.
Menyetujui dan menggabungkan permintaan tarik yang dihasilkan.
Buat rilis/tag dengan versi Icons Tabler baru.

Paket secara otomatis dibangun kembali dan diterbitkan, dengan Build and Publish package .