angular tabler icons 다운로드 - angular tabler icons 소스 코드 다운로드

angular tabler icons

타사 구성 요소

v3.26.0 - Tabler Icons v3.26

다운로드

앵글 블러 아이콘

설명

이 패키지를 사용하면 Angular Applications에서 태블러 아이콘을 사용할 수 있습니다. Tabler Icons는 웹 프로젝트에서 사용할 수있는 무료 MIT 라이센스 고품질 SVG 아이콘 세트입니다. 각 아이콘은 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

이 버전에는 Tabler Icons v3.26.0이 포함되어 있으며 변경 사항을 사용할 수있는 아이콘을 확인하려면 Changelog를 참조하십시오.

스타일링 아이콘

각 아이콘은 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. 자산 수입

가져와야합니다.

<i-tabler> 구성 요소가 포함 된 TablericonsModule
필요한 아이콘

우리는 이것을 모듈성을 위해 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. 템플릿에서 사용하십시오

기능 또는 공유 모듈에서 아이콘 모듈을 가져 오면 아이콘을 다음과 같이 사용하십시오.

 < 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

새로운 태블러 아이콘 버전의 재건하는 방법

새로운 태블러 아이콘 버전 (예 : 2.40.0 )과 함께 Automatic PR on Tabler Icons Release 실행하십시오. 이 워크 플로우는 자동으로 새로운 풀 요청을 생성합니다.
생성 된 풀 요청을 승인하고 병합하십시오.
새로운 태블러 아이콘 버전으로 릴리스/태그를 만듭니다.

GitHub Actions 워크 플로 Build and Publish package 와 함께 패키지가 자동으로 재건되고 게시됩니다.