KarsaandEric Fennis
99d25bdee2
* feat(packages): extract build logic to @lucide/shared, still wip * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(packages): extract build logic to @lucide/shared, still wip * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * chore(icons): revert git hook changes made to icons * fix(packages/astro,react-native,vue): fix iconNode type fix(packages/vue): fix hasA11yProp * fix(packages/solid): make component reactive & add unit tests for checking prop changes * test(packages/vue): add reactivity tests to @lucide/vue * fix(packages): replace cpy-cli, accidentally removed during main merge * docs(packages): upgrade react documentation with nonScalingStroke * fix(tests): update snapshots for lucide-react * feat(docs): upgraded package guides with nonScalingStroke, dropping absoluteStrokeWidth * fix(vue,react-native): fix linting issues * fix(icons): add proper fallback for icon width in calculatedStrokeWidth * fix(packages/svelte): add globalProps.class to icons * fix(packages/shared): wrap width, height & size in isDefined * Update types.ts * fix(packages/svelte): do not pass propsClass to mergeClasses --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
3.2 KiB
title, description
| title | description |
|---|---|
| Getting started - Angular | This guide will help you get started with Lucide in your Angular project. |
Getting started
This guide will help you get started with Lucide in your Angular project.
Make sure you have an Angular environment set up. If you don't have one yet, you can create a new Angular project using @angular/cli.
Prerequisites
This package requires Angular 17+ and uses standalone components, signals, and zoneless change detection.
Installation
::: code-group
pnpm add @lucide/angular
yarn add @lucide/angular
npm install @lucide/angular
bun add @lucide/angular
:::
Importing your first icon
This library is built with standalone components, so it's completely tree-shakable.
Every icon can be imported as a ready-to-use standalone component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
Standalone icons
import { Component } from '@angular/core';
import { LucideFileText } from '@lucide/angular';
@Component({
selector: 'app',
template: '<svg lucideFileText></svg>',
imports: [LucideFileText],
})
export class App {}
Dynamic icon component
When you need to render icons dynamically (for example in a list of menu items or based on a boolean signal), you can use the LucideDynamicIcon component:
import { Component, computed, signal } from '@angular/core';
import { LucideDynamicIcon, LucideCircleCheck, LucideCircleX } from '@lucide/angular';
@Component({
selector: 'app',
template: `<svg [lucideIcon]="icon()"></svg>`,
imports: [LucideDynamicIcon],
})
export class App {
protected readonly model = signal<boolean>(true);
protected readonly icon = computed(() => (this.model() ? LucideCircleCheck : LucideCircleX));
}
Component inputs
To customize the appearance of an icon, you can use the following inputs:
| name | type | default |
|---|---|---|
size |
number | 24 |
color |
string | currentColor |
strokeWidth |
number | 2 |
nonScalingStroke |
boolean | false |
title |
string | null |
Because icons render as SVG elements, all standard SVG attributes can also be applied. See the list of SVG Presentation Attributes on MDN.
<svg
lucideHouse
[size]="48"
color="red"
[strokeWidth]="1"
title="Home"
></svg>
For more examples and details on how to use these inputs, continue the guide: