Téléchargement angular tabler icons - Téléchargement du code source angular tabler icons

angular tabler icons

Composants tiers

v3.26.0 - Tabler Icons v3.26

Télécharger

iCons angulaires

Description

Ce package vous permet d'utiliser les icônes de tableur dans vos applications angulaires. Les icônes de tableur sont un ensemble d'icônes SVG de haute qualité liées au MIT gratuites à utiliser dans vos projets Web. Chaque icône est conçue sur une grille 24x24 et une course de 2px.

Installer

1. Installez le package

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

Usage

Autonome

Si vous utilisez des composants autonomes, utilisez le provideTablerIcons()

Composant

 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 >

Icônes disponibles

Liste des icônes disponibles: https://tiller.io/icons

Cette version comprend des icônes de tableur v3.26.0 , voir Changelog pour savoir quelles icônes sont disponibles.

Icônes de style

Chaque icône peut être stylée séparément avec 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 ;
}

Options

Certaines options sont disponibles pour configurer le module:

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

Choisissez toutes les icônes

Vous pouvez importer toutes les icônes à la fois en faisant ce qui suit. Cependant, gardez à l'esprit qu'en faisant cela, toutes les icônes se retrouveront dans votre bundle d'applications. Bien que ce ne soit pas une grande partie d'un problème de prototypage, il n'est pas recommandé pour aucune application que vous prévoyez de publier .

 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 (héritage)

1. Générez un module pour héberger les icônes que vous importez

ng generate module icons

2. Importer des actifs

Vous devez importer:

Tablericonsmodule, car il contient le composant <i-tabler>
Les icônes dont vous avez besoin

Nous avons mis cela dans iconsmodule pour la modularité. Voir l'exemple ci-dessous:

Fichier: 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. Importer iconsmodule

Si vous utilisez NGModules, importez-le de cette façon:

 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. Utilisez-le dans le modèle

Après avoir importé l' iconsmodule dans votre fonctionnalité ou votre module partagé, utilisez les icônes comme suit:

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

Compatibilité de la version angulaire

Angulaire	iCons angulaires
18 et 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+

Contributif

N'hésitez pas à signaler les problèmes ou à contribuer à ce projet! Voici quelques conseils à démarrer:

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

Comment reconstruire pour la version des icônes de tableur plus récentes

Exécutez GitHub Actions Workflow Automatic PR on Tabler Icons Release , avec de nouvelles icônes de tableur version (par exemple 2.40.0 ). Ce flux de travail créera automatiquement une nouvelle demande de traction.
Approuver et fusionner la demande de traction générée.
Créez une version / balise avec la nouvelle version d'icônes de tableur.

Le package est automatiquement reconstruit et publié, avec le Build and Publish package de workflow GitHub Actions.