ng heroicons
1.0.0
Ngheroicons는 프로젝트에서 영웅을 사용하는 각도 구성 요소입니다. 유용 할 수 있기를 바랍니다.
어떻게 작동하는지 알고 싶다면 angular 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로 이동하여 아이콘의 이름을 가져 와서 접미사 {outline|solid}-icon 에 따라 태그 html에 사용하십시오. 예를 들어, 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 " /> 이것은 여러 각도 버전에 대한 아이콘 구성 요소를 구축하는 Monorepo입니다. Angular 11에서 14에서 14의 호환성과의 충돌을 피하기 위해 workspaces 사용하지 않고 각 설정 당 분리 된 폴더 만 사용하지 않습니다.
방문 페이지는 공통 각도 버전을 사용하는 일반적인 착륙 https://ng-heroicons.dimaslz.dev/입니다.
$ yarn --cwd=packages/angular-v14 build lib -c productiondist/v14 에서 분포 내용을 새로 고치십시오 : $ yarn v14-copy-release$ yarn --cwd=landing install$ yarn --cwd=landing start 먼저 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 |
| Angular 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 |
| Angular 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 |
| Angular 14 | $ yarn --cwd=packages/angular-v14 start playground |
| 각도 15 | $ yarn --cwd=packages/angular-v15 start playground |
| 각도 16 | $ yarn --cwd=packages/angular-v16 start playground |
| Angular 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"
} 
