Angular Line Awesome is an Angular component to manage Line Awesome icons.
npm install angular-line-awesomeAngular Line Awesome is an Angular component to manage Line Awesome icons.
_Click here to see the demo examples in the component page._
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
``typescript
//...
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]);
}
}
`
| Name | Type | Options | Optional |
| ---------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| icon | String, IconProp | Line Awesome Icons String
\Ignore the _las_ and _la-_ part, this will be added by default.\ | No |
| title | | Free text | Yes |String
| size | | xs, lg, sm, lx, 1x, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x | Yes |Boolean
| fixedWidth | | true, false | Yes |Number, String
| rotate | | 90, 180, 270 | Yes |String
| flip | | horizontal, vertical, both | Yes |String
| pull | | left, right | Yes |Boolean
| spin | | true, false | Yes |Boolean
| pulse | | true, false | Yes |Boolean
| border | | true, false | Yes |Boolean
| inverse | | true, false | Yes |String
| transform | | 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
`html`
Note: the prefix is not necessary because the library uses the prefix 'las' as default.
Angular bind sintaxe
`html`
---
`javascript`
// component ts
icon: IconProp = { prefix: 'lab', iconName: 'angular' };
`html`
---
`javascript`
// component ts
icon: IconProp = ['lab', 'angular'];
iconSize: string = '2x';
`html`
---
`javascript`
// component ts
transform: Transform = { size: 1, x: 1, y: -1, rotate: 90, flipX: true, flipY: true };
`html`
_21.0.x_
- Angular 21
_20.0.x_
- Angular 20
_19.0.x_
- Angular 19
_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
`code
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
``
- Create separated icons packages to the regular, solid and brands SVG icons