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

``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]);
}
}
`

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

`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


`

Important release notes and breaking changes

_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

Contributions

`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
``

TODO

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