Angular Line Awesome

Angular Line Awesome is an Angular component to manage Line Awesome icons.

Click here to see the demo examples in the component page.

How to install

Install the package through NPM

npm install angular-line-awesome

Setup

1. Import { AngularLineAwesomeModule, LaIconLibrary } from "angular-line-awesome"
2. Add AngularLineAwesomeModule to the imports array
3. Inject LaIconLibrary into the constructor of the module
4. Import an icon like "lasHippo" from "angular-line-awesome/icons"
5. Add icon to the library with library.addIcons([lasHippo]) in the AppModule constructor

//...
import { AngularLineAwesomeModule, LaIconLibrary } from 'angular-line-awesome';
import { lasHippo, lasHeart, labAngular } from 'angular-line-awesome/icons';

@NgModule({
  //...
  imports: [
    //...
    AngularLineAwesomeModule
  ]
  //...
})
export class AppModule {
  constructor(library: LaIconLibrary) {
    // Add an icon to the library for convenient access in other components
    library.addIcons([lasHippo, lasHeart, labAngular]);
  }
}

Usage and options

Name	Type	Options	Optional
icon	String, IconProp	Line Awesome Icons *Ignore the las and la- part, this will be added by default.*	No
title	String	Free text	Yes
size	String	xs, lg, sm, lx, 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x	Yes
fixedWidth	Boolean	true, false	Yes
rotate	Number, String	90, 180, 270	Yes
flip	String	horizontal, vertical, both	Yes
pull	String	left, right	Yes
spin	Boolean	true, false	Yes
pulse	Boolean	true, false	Yes
border	Boolean	true, false	Yes
inverse	Boolean	true, false	Yes
transform	String	grow-NUMBER, shrink-NUMBER, up-NUMBER, left-NUMBER, right-NUMBER, up-NUMBER, down-NUMBER, rotate-DEGREES, flip-v, flip-h *NUMBER is a number representings pixel, DEGREES is a number representings degrees, e.g. grow-1, rotate-90*	Yes

Examples

<la-icon icon="hippo"></la-icon>
<la-icon icon="hippo" size="2x"></la-icon>
<la-icon icon="hippo" rotate="90"></la-icon>
<la-icon icon="hippo" flip="horizontal"></la-icon>
<la-icon icon="hippo" pull="right"></la-icon>
<la-icon icon="hippo" spin="true"></la-icon>
<la-icon icon="hippo" pulse="true"></la-icon>
<la-icon icon="hippo" border="true"></la-icon>
<la-icon icon="hippo" inverse="true"></la-icon>
<la-icon icon="las hippo" transform="grow-10 down-4 right-8 rotate-45 flip-v flip-h"></la-icon