mirror of https://github.com/lucide-icons/lucide.git synced 2025-12-16 21:07:43 +01:00

Files

Wojciech Maj 33be2c2430 Split commands in documentation to make it possible to use Copy to clipboard icon (#853 )

GitHub adds Copy to clipboard button to all code snippets. By splitting npm and yarn specific snippets into two separate snippets we make it possible to copy the command dev is interested in in one click instead of manually selecting it and copying with Ctrl+C.

2022-10-27 08:19:45 +02:00

3.3 KiB

Raw Blame History

Lucide Angular

Implementation of the lucide icon library for angular applications.

Installation

yarn add lucide-angular

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.

<!-- app.component.html -->
<div id="lucide-icon"></div>

// 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('lucide-icon');
    const elm = createElement(Activity);
    elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...

    if (div) {
      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.

// 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, AlarmCheck, Edit } from 'lucide-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

<!-- app.component.html -->
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
<lucide-icon name="edit" class="myicon"></lucide-icon>

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.

// 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 {}

<!-- app.component.html -->
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>

// app.component.ts
import { Component } from '@angular/core';
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;
}

Notes

Import all icons

In Method 2: import all icons in app.module.ts by:


import { icons } from 'lucide-angular/icons';

LucideAngularModule.pick(icons)

...

3.3 KiB Raw Blame History