/angular-line-awesome

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

Primary LanguageJavaScriptMIT LicenseMIT

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>

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

  • Angular 18

17.0.x

  • Angular 17

16.0.x

  • Angular 16

15.0.x

  • Angular 15

14.0.x

  • Angular 14

13.0.x

  • Angular 13

1.2.x

  • Angular 11

1.1.x

  • Angular 9
  • Line Awesome 1.3.0 SVG Icons (the icons are now loaded in SVG format)
  • Tree shakable icons (import only the necessary icons)
  • Removed the Font Icons support

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

  • You need to import the icons that you are using in your AppModule
  • You can now remove the lineawesome package from your node modules
  • Remove the lineawesome styles import on your angular.json file

1.0.x

  • Angular 8
  • Line Awesome 1.3.0 Font Icons

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

  • Create separated icons packages to the regular, solid and brands SVG icons