angular tabler icons скачать - angular tabler icons скачать исходный код

angular tabler icons

Сторонние компоненты

v3.26.0 - Tabler Icons v3.26

Скачать

Угловой цикл-иконы

Описание

Этот пакет позволяет использовать значки таблеров в ваших угловых приложениях. Значки таблеток-это набор бесплатных высококачественных значков 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

Эта версия включает в себя значки планшетов 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>
Значки, которые вам нужны

Мы поместили это в IconsModule для модульности. См. Пример ниже:

Файл: 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. Импорт IconsModule

Если вы используете 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. Используйте его в шаблоне

После импорта IconsModule в вашей функции или общего модуля используйте значки следующим образом:

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

Совместимость угловой версии

Угловой	Угловой цикл-иконы
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

Как восстановить для более новой версии значков табличков

Запустите GitHub Actions Workflow Automatic PR on Tabler Icons Release с новой версией значков таблички (например, 2.40.0 ). Этот рабочий процесс автоматически создаст новый запрос на притяжение.
Утвердить и объединить сгенерированный запрос на вытяжение.
Создайте выпуск/тег с новой версией значков таблички.

Пакет автоматически перестраивается и опубликован, с Build and Publish package .