From e968bf51e3fdf8fd09d430148fc465e1eb948d05 Mon Sep 17 00:00:00 2001 From: SMAH1 Date: Sun, 4 Apr 2021 09:31:08 +0430 Subject: [PATCH] Delete README.md --- .../projects/lucide-angular/README.md | 189 ------------------ 1 file changed, 189 deletions(-) delete mode 100644 packages/lucide-angular/projects/lucide-angular/README.md diff --git a/packages/lucide-angular/projects/lucide-angular/README.md b/packages/lucide-angular/projects/lucide-angular/README.md deleted file mode 100644 index 1141976..0000000 --- a/packages/lucide-angular/projects/lucide-angular/README.md +++ /dev/null @@ -1,189 +0,0 @@ -# Lucide Angular - -Use the lucide icon library in you angular app. - -## 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 - -
-``` - -``` 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 - - - -``` - -``` 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 - - - -``` - -``` 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