ng heroiconsダウンロード-HeroIconsソースコードng heroiconsダウンロード

ng heroicons

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

1.0.0

ダウンロード

@dimaslz/ng-heroicons

NgheroiconsあなたのプロジェクトでHeroiConsを使用するのは角度コンポーネントです。それが役に立つことを願っています。

Angular CLIの仕組みを知りたい場合は、このhttps://cli.angular.io/に従ってください。

ライブデモ：https：//ng-heroicons.dimaslz.dev

プロジェクトにインストールする方法

このパッケージには、11〜18のAngularバージョンと互換性があります。

角度バージョン	パッケージバージョン
11.xx	`^1.11.*`
12.xx	`^1.12.*`
13.xx	`^1.13.*`
14.xx	`^1.14.*`
15.xx	`^1.15.*`
16.xx	`^1.16.*`
17.xx	`^1.17.*`
18.xx	`^1.18.0`
	`^1.18.1`
	`^1.18.2`	デフォルト

$ yarn add @dimaslz/ng-heroicons@^XX

$ npm install @dimaslz/ng-heroicons@^XX

 // app.module.ts
import { NgHeroiconsModule } from "@dimaslz/ng-heroicons" ;
// ...

@ NgModule ( {
  // ...
  imports : [
    CommonModule ,
    NgHeroiconsModule ,
  ] ,
  // ...
} )

//...

使い方

https://ng-heroicons.dimaslz.devにアクセスして、アイコンの名前を取得し、タグHTMLでサフィックス{outline|solid}-iconに続いて使用します。たとえば、 academic cap 、アウトラインの場合は<academic-cap-outline-icon></academic-cap-outline-icon>または<academic-cap-solid-icon></academic-cap-solid-icon>固体アイコンにする必要があります。 fromバージョン> = 1.18.1は動的コンポーネント<ng-heroicons icon="..." />使用することができます

ライン、CSSのスタイルを使用するか、色とサイズを合格することもできます。

 <!-- using style in line (style for color will affect to svg) -->
< academic-cap-outline-icon style =" color: red; " > </ academic-cap-outline-icon >

<!-- using css classes (class for color will affect to svg) -->
< academic-cap-outline-icon class =" text-red-400 " > </ academic-cap-outline-icon >

<!-- pass color or size -->
< academic-cap-outline-icon size =" 48 " color =" red " > </ academic-cap-outline-icon >

<!-- To apply specific style to the SVG, use `svgStyle` -->
< academic-cap-outline-icon svgStyle =" color: red; " > </ academic-cap-outline-icon >

<!-- To apply specific css to the SVG, use `svgClass` -->
< academic-cap-outline-icon svgClass =" your-class-for-the-svg " > </ academic-cap-outline-icon >

動的コンポーネントを使用する<ng-heroicons ... icon="..." /> （fromバージョン> = 1.18.1 ）

 <!-- force to render outline icon -->
< ng-heroicons icon =" academic-cap " outline />

<!-- force to render solid icon -->
< ng-heroicons icon =" academic-cap " solid />

<!-- using style -->
< ng-heroicons icon =" academic-cap " style =" color: red; " />

<!-- using css classes (class for color will affect to svg) -->
< ng-heroicons icon =" academic-cap " class =" text-red-400 " />

<!-- pass color or size -->
< ng-heroicons icon =" academic-cap " size =" 48 " color =" red " />

発達

これは、複数の角度バージョンのアイコンコンポーネントを構築するためのモノレポです。 Angular 11から14の互換性との融合を避けるために、 workspacesを使用しておらず、Angularセットアップごとに分離されたフォルダーのみが使用されています。

着陸

ランディングページは、一般的なランディングhttps://ng-heroicons.dimaslz.dev/であり、最後の角度バージョンを使用しています。

Angular 14 libの構築： $ yarn --cwd=packages/angular-v14 build lib -c production
dist/v14 ： $ yarn v14-copy-releaseで分布コンテンツを更新します
着陸パッケージのインストール： $ yarn --cwd=landing install
プロジェクトを実行： $ yarn --cwd=landing start
http：// localhost：4200でページに参加してください

バージョンごとにライブラリを構築します

まず、 libパッケージを構築する必要があります

角度バージョン	指示
角度11	`$ yarn --cwd=packages/angular-v11 build lib -c production`
角度12	`$ yarn --cwd=packages/angular-v12 build lib -c production`
角度13	`$ yarn --cwd=packages/angular-v13 build lib -c production`
角度14	`$ yarn --cwd=packages/angular-v14 build lib -c production`
角度15	`$ yarn --cwd=packages/angular-v15 build lib -c production`
角16	`$ yarn --cwd=packages/angular-v16 build lib -c production`
角度17	`$ yarn --cwd=packages/angular-v17 build lib -c production`
角度18	`$ yarn --cwd=packages/angular-v18 build lib -c production`

バージョンごとに遊び場を実行します

まず、 libパッケージを構築する必要があります。この遊び場には特別なものはありません。図書館をテストするデモページは、予想どおりに機能しています。

角度バージョン	指示
角度11	`$ yarn --cwd=packages/angular-v11 start playground`
角度12	`$ yarn --cwd=packages/angular-v12 start playground`
角度13	`$ yarn --cwd=packages/angular-v13 start playground`
角度14	`$ yarn --cwd=packages/angular-v14 start playground`
角度15	`$ yarn --cwd=packages/angular-v15 start playground`
角16	`$ yarn --cwd=packages/angular-v16 start playground`
角度17	`$ yarn --cwd=packages/angular-v17 start playground`
角度18	`$ yarn --cwd=packages/angular-v18 start playground`

成分を再生します

$ yarn generateこれによりprojects/ng-heroicons/src/lib/heroicons/outline and projects/ng-heroicons/src/lib/heroicons/solid新しい角度コンポーネントが生成され、 projects/playground/src/app/icons/outline-icons.htmlとしての遊び場でテンプレートされます。 projects/playground/src/app/icons/solid-icons.html

HeroIconsを構築します

$ yarn build --prod ng-heroicons

著者

 {
  name : "Dimas López" ,
  role : "FullStack Software Engineer" ,
  alias : "dimaslz" ,
  twitter : "https://twitter.com/dimaslz" ,
  site : "https://dimaslz.com" ,
  linkedin : "https://www.linkedin.com/in/dimaslopezzurita"
}