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