Use heroicons.com in your Angular applications

I love TailwindCSS and, when I use it I need icons, then usually I use Fontawesome, it is a common option, or I use free opensource icons from some platforms, but you need to create your own collection. But there is a great option recommended and made by the TailwindCSS makers and designed by @steveschoger, this is heroicons.com with around 226 Icons in SVG. Each icon, you can copy and paste the SVG and use it but is not a maintainable way.

So I create an Angular icon library, based in heroicons.com to use un my application easily but at the same time, for fun and share my utilities to the community.

Take a look this playground: https://ng-heroicons.dimaslz.dev

How to use

First, install the dependency with npm or yarn.

$ yarn add @dimaslz/ng-heroicons 

Now, add the module to the module where you want to use, commonly in the app.module.ts to can use around all application.

// app.module.ts import { NgHeroiconsModule } from "@dimaslz/ng-heroicons"; // ... @NgModule({ declarations: [AppComponent], imports: [BrowserModule, NgHeroiconsModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {} //... 

then, use any icons with the following syntax: Outline icons with the suffix -outline-icon and -solid-icon for solid ones.

<!-- outline example --> <thumb-up-outline-icon></thumb-up-outline-icon> <!-- solid example --> <thumb-up-solid-icon></thumb-up-solid-icon> 

Multiple examples

<!-- outline with stroke 1 and color pink --> <thumb-up-outline-icon stroke="1" color="pink"></thumb-up-outline-icon> <!-- solid with color purple --> <thumb-up-solid-icon color="purple"></thumb-up-solid-icon> <!-- ... with size 36 --> <thumb-up-solid-icon ... size="36"></thumb-up-solid-icon> <!-- ... with style --> <thumb-up-solid-icon ... style="color: green;"></thumb-up-solid-icon> <!-- ... with tailwind class --> <thumb-up-solid-icon ... class="text-blue-400"></thumb-up-solid-icon> 

And, all parameters, style, class, color, stroke, and style are reactive, so, you can change the option in realtime by models.

Play with this in https://codesandbox.io/s/test-dimaslzng-heroicons-qvbvh

Feel free to join the repository in Github https://github.com/dimaslz/ng-heroicons, and, that's it, I hope you find it helpful :), feedback is welcome.

Thanks!