Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marco-martins/angular-line-awesome
Angular Line Awesome is an Angular component to manage Line Awesome icons.
https://github.com/marco-martins/angular-line-awesome
List: angular-line-awesome
Last synced: about 2 months ago
JSON representation
Angular Line Awesome is an Angular component to manage Line Awesome icons.
- Host: GitHub
- URL: https://github.com/marco-martins/angular-line-awesome
- Owner: marco-martins
- License: mit
- Created: 2020-03-19T15:56:39.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-10T14:25:39.000Z (3 months ago)
- Last Synced: 2024-11-08T16:02:31.595Z (2 months ago)
- Language: JavaScript
- Homepage: https://angular-line-awesome.herokuapp.com/
- Size: 2.83 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-line-awesome - Angular Line Awesome is an Angular component to manage [Line Awesome](https://icons8.com/line-awesome) icons. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-line-awesome - Angular Line Awesome is an Angular component to manage 🌎 [Line Awesome](icons8.com/line-awesome) icons. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-line-awesome - Angular Line Awesome is an Angular component to manage 🌎 [Line Awesome](icons8.com/line-awesome) icons. (Table of contents / Third Party Components)
README
# Angular Line Awesome
Angular Line Awesome is an [Angular](https://angular.io) component to manage [Line Awesome](https://icons8.com/line-awesome) icons.
_Click [here](https://angular-line-awesome.herokuapp.com/) to see the demo examples in the component page._
# How to install
**Install the package through [NPM](https://www.npmjs.com/package/angular-line-awesome)**
`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](https://icons8.com/line-awesome)
\*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
**_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 [email protected]: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