Home

Awesome

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

NameTypeOptionsOptional
iconString, IconPropLine Awesome Icons <br> *Ignore the las and la- part, this will be added by default.*No
titleStringFree textYes
sizeStringxs, lg, sm, lx, 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10xYes
fixedWidthBooleantrue, falseYes
rotateNumber, String90, 180, 270Yes
flipStringhorizontal, vertical, bothYes
pullStringleft, rightYes
spinBooleantrue, falseYes
pulseBooleantrue, falseYes
borderBooleantrue, falseYes
inverseBooleantrue, falseYes
transformStringgrow-NUMBER,<br> shrink-NUMBER,<br> up-NUMBER,<br> left-NUMBER,<br> right-NUMBER,<br> up-NUMBER,<br> down-NUMBER, <br> rotate-DEGREES,<br> flip-v, <br> flip-h <br><br> *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>

Note: the prefix is not necessary because the library uses the prefix 'las' as default.

Angular bind sintaxe

<!-- ['las', 'hippo'] is an array that indicates the [prefix, iconName] -->
<la-icon [icon]="['las', 'hippo']"></la-icon>

// component ts
icon: IconProp = { prefix: 'lab', iconName: 'angular' };
<!-- component view -->
<la-icon [icon]="icon"></la-icon>

// component ts
icon: IconProp = ['lab', 'angular'];
iconSize: string = '2x';
<!-- component view -->
<la-icon [icon]="icon" [size]="iconSize"></la-icon>

// component ts
transform: Transform = { size: 1, x: 1, y: -1, rotate: 90, flipX: true, flipY: true };
<!-- component view -->
<la-icon icon="lab angular" [transform]="transform"></la-icon>

Important release notes and breaking changes

18.0.x

17.0.x

16.0.x

15.0.x

14.0.x

13.0.x

1.2.x

1.1.x

From the 1.0.x version, there is a small breaking changes:

1.0.x

Contributions

Clone repo:
git clone git@github.com:marco-martins/angular-line-awesome.git

Build:
npm run build angular-line-awesome
Note: It's important to run the build with "npm run build" instead of "ng build" because there are some hooks running on "postbuild"

Run the project (demo-example by default):
ng serve

Run the tests:
ng test angular-line-awesome

Pull requests to the DEVELOP branch

TODO