@docsui/ng-heroicons v0.1.6
NgHeroicons
NgHeroicons just it is a Angular components to use Heroicons in your projects. I hope that could be useful.
If you want to know how is working Angular CLI follow this https://cli.angular.io/.
Live demo: https://ng-heroicons.dimaslz.dev
How to install in your project
$ yarn add @dimaslz/ng-heroicons
$ npm install @dimaslz/ng-heroicons
// app.module.ts
import { NgHeroiconsModule } from "@dimaslz/ng-heroicons";
// ...
@NgModule({
// ...
imports: [
CommonModule,
NgHeroiconsModule,
],
// ...
})
//...How to use
Go to https://ng-heroicons.dimaslz.dev and get the name of the icon and use in your tag html following suffix {outline|solid}-icon. For example: academic cap should be <academic-cap-outline-icon></academic-cap-outline-icon> for outline or <academic-cap-solid-icon></academic-cap-solid-icon> for solid icons.
You can use your style in line, css or just pass color and size.
<!-- 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>Development server
Run playground
$ yarn start playground
Regenerate components
$ yarn generate This will generate the new angular components in projects/ng-heroicons/src/lib/heroicons/outline and projects/ng-heroicons/src/lib/heroicons/solid, and the templated in playground as projects/playground/src/app/icons/outline-icons.html adn projects/playground/src/app/icons/solid-icons.html
Build heroicons
$ yarn build --prod ng-heroicons
Author
Dimas López · FullStack Software development
👨🏻💻 https://dimaslz.dev