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!
Top comments (1)
Thanks.
This was helpful