Add lucide-angular again! (#281)

* Add lucide-angular

* README of lucide-angular
This commit is contained in:
SMAH1
2021-04-11 15:48:50 +04:30
committed by GitHub
parent cd75f0c384
commit d14a85d644
27 changed files with 952 additions and 4 deletions

View File

@@ -0,0 +1,191 @@
# Lucide Angular
Implementation of the lucide icon library for angular applications.
> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
## Installation
``` sh
yarn add lucide-angular
# or
npm install lucide-angular
```
## How to use
There are three ways for use this library.
### Method 1: createElement
After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
``` xml
<!-- app.component.html -->
<div id="ico"></div>
```
``` js
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { createElement } from 'lucide-angular';
import { Activity } from 'lucide-angular/icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit(): void {
const div = document.getElementById('ico');
const elm = createElement(Activity);
elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...
div.appendChild(elm);
}
}
```
### Method 2: User __Tag__ with __name__ property
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
``` js
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LucideAngularModule } from 'lucide-angular';
import { AlarmCheck, Edit } from 'lucide-angular/icons'; // or import other icons
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
``` css
/* app.component.css */
.myicon {
/* Be sure to set these values */
width: 48px;
height: 48px;
/* or other properties like `color`, `fill`, `stroke-width` */
}
```
``` xml
<!-- app.component.html -->
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
<lucide-icon name="edit" class="myicon"></lucide-icon>
```
``` js
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
```
### Method 3: User __Tag__ with __img__ property
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
``` js
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LucideAngularModule } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
``` css
/* app.component.css */
.myicon {
/* Be sure to set these values */
width: 48px;
height: 48px;
/* or other properties like `color`, `fill`, `stroke-width` */
}
```
``` xml
<!-- app.component.html -->
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
```
``` js
// app.component.ts
import { Component } from '@angular/core';
import { Airplay, Circle } from 'lucide-angular/icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ico1 = Airplay;
ico2 = Circle;
}
```
## Notes
### Import all icons
In `Method 2`: import all icons in `app.module.ts` by:
``` js
...
import { icons } from 'lucide-angular/icons';
....
LucideAngularModule.pick(icons)
....
```
### Tags
You can use the following tags instead of `lucide-icon`:
* lucide-angular
* i-lucide
* span-lucide
All of the above are the same