Nondeterministic Postrequisite Metaprotocol

    lucide-angular
    TypeScript icon, indicating that this package has built-in type declarations

    0.16.12 • Public • Published

    Lucide Angular

    Implementation of the lucide icon library for angular applications.

    What is lucide? Read it here.

    Installation

    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.

    <!-- 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)
    ....

    Tags

    You can use the following tags instead of lucide-icon:

    • lucide-angular
    • i-lucide
    • span-lucide

    All of the above are the same

    Install

    npm i lucide-angular

    Homepage

    lucide.dev/

    DownloadsWeekly Downloads

    322

    Version

    0.16.12

    License

    ISC

    Unpacked Size

    5.21 MB

    Total Files

    2098

    Last publish

    Collaborators

    • ericfennis