DEV Community

Cover image for Use heroicons.com in your Angular applications
Dimas López
Dimas López

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

//...
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (1)

Collapse
 
itzz_okure profile image
Okure U. Edet Kingsley🧑‍💻🚀

Thanks.
This was helpful