angular tabler icons Download - angular tabler icons Download do código -fonte

angular tabler icons

Componentes de terceiros

v3.26.0 - Tabler Icons v3.26

Baixar

Angular-Tabler-icons

Descrição

Este pacote permite que você use os ícones da Tabler em seus aplicativos angulares. Os ícones da Tabler é um conjunto de ícones SVG de alta qualidade licenciados pelo MIT gratuitos para você usar em seus projetos da Web. Cada ícone foi projetado em uma grade 24x24 e um golpe de 2px.

Instalar

1. Instale o pacote

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

Uso

Independente

Se você estiver usando componentes independentes, use os provideTablerIcons()

Componente

 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 >

Ícones disponíveis

Lista de ícones disponíveis: https://tabler.io/icons

Esta versão inclui os ícones da Tabler v3.26.0 , consulte Changelog para saber quais ícones estão disponíveis.

Ícones de estilo

Cada ícone pode ser estilizado separadamente com 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 ;
}

Opções

Algumas opções estão disponíveis para configurar o módulo:

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

Escolha todos os ícones

Você pode importar todos os ícones de uma só vez fazendo o seguinte. No entanto, lembre -se de que, ao fazer isso, todos os ícones acabarão no seu pacote de aplicativos. Embora isso possa não ser um grande problema para prototipagem, ele não é recomendado para qualquer aplicativo que você planeja lançar .

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

1. Gere um módulo para hospedar os ícones que você importará

ng generate module icons

2. Importar ativos

Você precisa importar:

Tableronsmodule, pois contém o componente <i-tabler>
Os ícones que você precisa

Colocamos isso em iconsmodule para modularidade. Veja o exemplo abaixo:

Arquivo: 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. IMPOST ICONSMODULE

Se você estiver usando ngmodules, importe -o desta maneira:

 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. Use -o no modelo

Depois de importar o iconsmodule em seu recurso ou módulo compartilhado, use os ícones da seguinte forma:

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

Compatibilidade da versão angular

Angular	Angular-Tabler-icons
18 e 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+

Contribuindo

Sinta -se à vontade para relatar problemas ou contribuir para este projeto! Aqui estão algumas dicas para começar:

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

Como reconstruir a versão mais recente dos ícones de Tabler

Executar o GitHub Actions Workflow Automatic PR on Tabler Icons Release , com a versão de Ícones da Tabler (por exemplo, 2.40.0 ). Este fluxo de trabalho criará automaticamente uma nova solicitação de tração.
Aprovar e mesclar a solicitação de tração gerada.
Crie uma versão/tag com a versão New Tabler Icons.

O pacote é reconstruído e publicado automaticamente, com o Build and Publish package do GitHub Ações.