Use heroicons.com in your Angular applications

#angular #heroicons #library

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!