ng heroicons下載 - ng heroicons源代碼下載的下載

ng heroicons

三方組件

1.0.0

下載

@dimaslz/ng-heroicons

Ngheroicons只是在您的項目中使用Heroicons的角度組件。我希望這可能有用。

如果您想知道如何工作角度CLI，請按照此https://cli.angular.io/。

實時演示：https：//ng-heroicons.dimaslz.dev

如何在項目中安裝

該軟件包與11到18的角版具有兼容性。

角版	軟件包版本
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 html後綴{outline|solid}-icon 。例如： academic cap應為<academic-cap-outline-icon></academic-cap-outline-icon>用於固體圖標的輪廓或<academic-cap-solid-icon></academic-cap-solid-icon> 。從版本> = 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="..." /> （來自版本> = 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 ，而是每個角設置的分離文件夾。

降落

著陸頁是使用最後一個角版本的常見著陸頁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和projects/ng-heroicons/src/lib/heroicons/solid生成新的角度組件，並在遊樂場中作為projects/playground/src/app/icons/outline-icons.html和projects/playground/src/app/icons/solid-icons.html

建立英雄

$ 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"
}