0.0.9 • Published 2 years ago
@rubens.lopes/angular-fluent-icons v0.0.9
AngularFluentIcons
A tree-shakable icon library for Angular, based on this article.
This library was generated with Angular CLI version 14.2.0.
Usage
Import FluentIconsModule
on your module
// app.module.ts
import { BrowserModule } from '@angular/platform-browser'
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
import { MyComponentComponent } from './componentes/my-component.component'
import { FluentIconsModule } from '@rubens.lopes/angular-fluent-icons'
@NgModule({
declarations: [AppComponent, MyComponentComponent],
imports: [BrowserModule, AppRoutingModule, FluentIconsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Use FluentIconsRegistryService
to register which icons you are using
// my-component.component.ts
import { Component } from '@angular/core'
import { FluentIconsRegistryService, fiAlbum } from '@rubens.lopes/angular-fluent-icons'
@Component({
selector: `app-my-component`,
templateUrl: `./my-component.component.html`,
})
export class MyComponentComponent {
constructor(private fluentIconRegistry: FluentIconsRegistryService) {
fluentIconRegistry.registerIcons([fiAlbum])
}
}
Finally, use the fluent-icons
component on the html, with intellisense, and control size, color and margin via css class
<!-- my-component.component.html-->
<fluent-icons class="fill-white w-16 h-16" name="album"></fluent-icons> <- This is a album icon