angular tabler icons Download - angular tabler icons Quellcode Download

angular tabler icons

Komponenten von Drittanbietern

v3.26.0 - Tabler Icons v3.26

Herunterladen

Angular-Tabler-ICons

Beschreibung

Mit diesem Paket können Sie die Tabler -Symbole in Ihren Winkelanwendungen verwenden. Tabler-Symbole sind eine Reihe von kostenlosen MIT-lizenzierten hochwertigen SVG-Icons, die Sie in Ihren Webprojekten verwenden können. Jedes Symbol ist auf einem 24x24 -Raster und einem 2px -Schlaganfall ausgelegt.

Installieren

1. Installieren Sie das Paket

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

Verwendung

Eigenständig

Wenn Sie eigenständige Komponenten verwenden, verwenden Sie die provideTablerIcons()

Komponente

 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 >

Verfügbare Symbole

Liste der verfügbaren Symbole: https://tabler.io/icons

Diese Version enthält Tabler -Symbole v3.26.0 , siehe ChangeLog, um zu wissen, welche Symbole verfügbar sind.

Styling -Symbole

Jedes Symbol kann separat mit CSS gestaltet werden:

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

Optionen

Einige Optionen stehen zur Konfiguration des Moduls zur Verfügung:

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

Wählen Sie alle Ikonen aus

Sie können alle Symbole gleichzeitig importieren, indem Sie Folgendes ausführen. Denken Sie jedoch daran, dass alle Symbole auf diesem Anwendungsbündel enden. Dies ist zwar möglicherweise kein Problem für das Prototyping, aber es wird nicht für eine Anwendung empfohlen, die Sie freigeben möchten .

 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 (Vermächtnis)

1. Generieren Sie ein Modul, um die Symbole zu hosten, die Sie importieren,

ng generate module icons

2. Importieren von Vermögenswerten

Sie müssen importieren:

TableericOnmodule, da es die <i-tabler> -Komponente enthält
Die Ikonen, die Sie brauchen

Wir haben dies in Iconsmodule für Modularität eingestellt. Siehe Beispiel unten:

Datei: 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.. Importikonsmodul

Wenn Sie Ngmodules verwenden, importieren Sie es so:

 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. Verwenden Sie es in der Vorlage

Verwenden Sie nach dem Importieren des Iconsmoduls in Ihrer Funktion oder dem gemeinsamen Modul die Symbole wie folgt:

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

Kompatibilität für Winkelversion

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

Beitragen

Fühlen Sie sich frei, Probleme zu melden oder zu diesem Projekt beizutragen! Hier sind nur wenige Tipps zu Beginn:

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

So bauen Sie für eine neuere Tabler -Icons -Version um

Führen Sie GitHub Actions Workflow Automatic PR on Tabler Icons Release mit neuer Tabler -Symbole (z. B. 2.40.0 ) aus. Dieser Workflow erstellt automatisch eine neue Pull -Anfrage.
Genehmigen Sie und fusionieren Sie die generierte Pull -Anfrage.
Erstellen Sie eine Version/Tag mit der neuen Tabler -Icons -Version.

Das Paket wird automatisch umgebaut und veröffentlicht, wobei das GitHub Action Workflow Build and Publish package .