diff --git a/packages/lucide-angular/README.md b/packages/lucide-angular/README.md
index 92bf6a7..ce3a22a 100644
--- a/packages/lucide-angular/README.md
+++ b/packages/lucide-angular/README.md
@@ -22,7 +22,7 @@ There are three ways for use this library.
After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
-``` xml
+``` html
```
@@ -39,12 +39,13 @@ import { Activity } from 'lucide-angular/icons';
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit {
ngOnInit(): void {
const div = document.getElementById('lucide-icon');
const elm = createElement(Activity);
elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...
+
if (div) {
div.appendChild(elm);
}
@@ -63,8 +64,7 @@ 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
+import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
@NgModule({
declarations: [
@@ -81,37 +81,12 @@ import { AlarmCheck, Edit } from 'lucide-angular/icons'; // or import other ico
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
+``` html
```
-``` 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`.
@@ -140,16 +115,6 @@ import { LucideAngularModule } from 'lucide-angular';
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
@@ -159,13 +124,14 @@ export class AppModule { }
``` js
// app.component.ts
import { Component } from '@angular/core';
-import { Airplay, Circle } from 'lucide-angular/icons';
+import { Airplay, Circle } from 'lucide-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
+
export class AppComponent {
ico1 = Airplay;
ico2 = Circle;
@@ -177,6 +143,7 @@ export class AppComponent {
### Import all icons
In `Method 2`: import all icons in `app.module.ts` by:
+
``` js
...
import { icons } from 'lucide-angular/icons';
@@ -184,10 +151,13 @@ 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
+
+- lucide-angular
+- i-lucide
+- span-lucide
All of the above are the same