angular tabler iconsのダウンロード - angular tabler iconsソースコードのダウンロード

angular tabler icons

サードパーティ製コンポーネント

v3.26.0 - Tabler Icons v3.26

ダウンロード

Angular-Tabler-Icons

説明

このパッケージを使用すると、Angularアプリケーションでテーパーアイコンを使用できます。 Tabler Iconsは、Webプロジェクトで使用できる無料の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.テンプレートで使用します

機能または共有モジュールに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 >

角度バージョンの互換性

角度	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+

貢献

問題を報告したり、このプロジェクトに貢献したりしてください！開始するヒントがいくつかあります。

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

新しいタブラーアイコンバージョンの再構築方法

GitHubアクションワークフローAutomatic PR on Tabler Icons Release実行し、新しいTabler Iconsバージョン（例えば2.40.0 ）を使用します。このワークフローは、自動的に新しいプルリクエストを作成します。
生成されたプルリクエストを承認してマージします。
新しいTabler Iconsバージョンでリリース/タグを作成します。

パッケージは自動的に再構築され、公開され、GitHub Actions Workflow Build and Publish packageが使用されます。