mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-13 13:48:26 +00:00
docs(version-1): Version 1 website (#4142)
* Update images * Adjust color * update accessebility * Add matrix hero * Add typescript documentation * Add basics section to vue pages * Add svelte docs * Fix dynamic sidebar * Add animation? * Some adjustments * Adjust animation * Updates docs * Add scaledown animation * Add docs for vue types * Fix layout accessibility page * fix framework select * adjust easing home animation * Write docs for Vue * Adjust animation home * Adjust home hero animation * Finish svelte docs * Add solid pages * remove spiral animation component * Add group icons * Added solid docs * update preact docs * Adjust examples preact docs * Add snackplayer * Get new editor * Save this * Add examples * Adjust styling * setup custom sandpack * Add script * Format files * Make sandpack plugin work * migrate react docs * Fix svelte and solid examples * Migrate to solid packages * Add darkmode package logos * Fix bug in selector * migrate vue examples * migrate advanced vue items * migrate preact and svelte examples * Add astro docs * adding more docs on guide for lucide library * Fix home animation * Cleanup * Added resources page, with more details and content * Add hero badge for Version 1 * Fix vercel json * Update missing paths * Fix build? * Replace lucide-vue-next * Fix build * Add some docs * update markdown * Setup angular docs * Add basic angular docs * Adjust code examples * Update title and descriptions * Update accessibility link * Update title and description * Add og image * Fix alignment * Add migration guides * Adjust version 1 markdown file * Add migration guide to the main list * Minor fixes * Update docs * Apply feedback * Select icons * Add pointer events none * Fix package links homepage * Format code * Fix types * Fix focus * Fix build * Fix focus * Apply feedback * Adjust imports * Adjust imports * Fix search * Apply feedback * Fix import in font docs * Small fixes * docs(guide): added easter egg icon. stay tuned, guys 😉 * Add llm txt plugin * Adjust logo top * docs(version-1): upgraded @lucide/angular guide for v1 website (#4144) * docs(guide/angular): rewrite some angular documentation * docs(guide/angular): extens angular guide with combining icons & icon provider guides * docs(guide/angular): fix angular sandbox, still needs @lucide/angular release tho * docs(guide/angular): rework the getting started page a bit more, refactor some more prop=>input occurences * docs(guide/angular): context provider => provideLucideConfig * Update docs/guide/angular/migration.md Co-authored-by: Eric Fennis <eric.fennis@gmail.com> * Update docs/guide/angular/advanced/combining-icons.md Co-authored-by: Eric Fennis <eric.fennis@gmail.com> * Apply suggestions from code review Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * docs(guide/angular): rework a11y for better flow & pacing * docs(guide/angular): salvage original phrase, it has better flow * docs(guide/angular): some more a11y nitpicking * docs(guide/angular): reduce llm fatigue * docs(guides/angular): fix app component selector * docs(guides/angular): fix angular sandpacks * Add sandpack angular to improve tree-shakable stack * Update docs/guide/angular/getting-started.md * docs(guides/angular): fix user import in combinding icons guide * docs(guides/angular): fix nested SVG phrasing * Update docs/guide/angular/advanced/with-lucide-lab.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/guide/angular/advanced/filled-icons.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * docs(guides/angular): fix createLucideIcon guide * docs(guides/angular): upgrade all relevant angular sandpack demos --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * fix(docs): add autogenerated OG images to gitignore * fix(docs): unify the case of "Lucide" & "Lucide Lab" over all docs and readmes * Fix build * Add next tag to all installation guides * Add top bar notification * Minor fixes * Update text * Add todos * Update og image * Adjust install command * Color top bar * fix(docs): ignore all OG images, expect general.png * fix(docs): fix the package list, hide @lucide/icons, downgrade angular logo, link to v0 guide, fix package title alignment * Update docs/.vitepress/theme/components/base/LayoutTop.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/guide/react/advanced/dynamic-icon-component.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update CONTRIBUTING.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/.vitepress/sidebar/resources.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fix code example * fix(docs): version 1 => Version 1 * feat(docs): add angular to new features in v1 * Fix next line issue * feat(docs): fix typo (code example_s_) * Fix deadlink * feat(docs): fix some more typos and irky grammar * feat(docs): fix lowercase lucide in sidebar 😅 * Update docs/guide/version-1.md Co-authored-by: Karsa <contact@karsa.org> --------- Co-authored-by: Karsa <contact@karsa.org> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Eric Fennis
co-authored by
Copilot Autofix powered by AI
Karsa
Copilot Autofix powered by AI
Karsa
parent
e715245d62
commit
484f2c9cd3
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Accessibility - Angular
|
||||
description: Best practices for accessible icons in your Angular application.
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import OverviewLink from '~/.vitepress/theme/components/base/OverviewLink.vue'
|
||||
</script>
|
||||
|
||||
# Accessibility
|
||||
|
||||
Lucide icons ship with `aria-hidden="true"` by default. In almost all cases this is exactly what you want.
|
||||
|
||||
## Should icons be accessible?
|
||||
|
||||
Most of the time, icons are used purely for decoration or visual reinforcement. Exposing decorative icons to assistive technologies can create unnecessary noise for screen reader users.
|
||||
|
||||
For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility:
|
||||
|
||||
<OverviewLink href="/guide/accessibility" title="Accessible Icons" desc="Best practices for accessible icons in your application."/>
|
||||
|
||||
Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Angular.
|
||||
|
||||
## Making an Icon Accessible
|
||||
|
||||
To expose an icon to assistive technologies, provide an accessible name by binding the `title` input of the icon component.
|
||||
|
||||
This removes the `aria-hidden` attribute and makes the icon visible to screen readers.
|
||||
|
||||
```angular-html
|
||||
<svg lucideHouse title="This is my house" />
|
||||
```
|
||||
|
||||
Choose a label that clearly describes the meaning of the icon or the action it represents in the context of your application.
|
||||
|
||||
## Accessible Icon Buttons
|
||||
|
||||
When an icon is used inside a button, the accessible label should usually be applied to the button itself, and not the icon.
|
||||
|
||||
```angular-html
|
||||
<button aria-label="Go to home">
|
||||
<svg lucideHouse></svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
This ensures assistive technologies describe the interactive element, rather than the decorative graphic inside it.
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
title: Combining icons - Angular
|
||||
description: Learn how to combine multiple icons into a single icon nested SVG elements in your Angular application.
|
||||
---
|
||||
<script setup>
|
||||
import Sandpack from '~/.vitepress/theme/components/editors/SandpackAngular.vue'
|
||||
</script>
|
||||
|
||||
# Combining icons
|
||||
|
||||
You can combine multiple icons into a single icon by using SVG in SVG.
|
||||
This is useful for if you want to be creative and make your own custom icons by combining existing icons.
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideScan, LucideUser } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideScan, LucideUser],
|
||||
template: `
|
||||
<svg lucideScan [size]="48">
|
||||
<svg lucideUser
|
||||
[size]="12"
|
||||
x="6"
|
||||
y="6"
|
||||
[strokeWidth]="4"
|
||||
[absoluteStrokeWidth]="true"
|
||||
/>
|
||||
</svg>`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
This is valid SVG and all SVG properties are supported on the icons.
|
||||
The `x` and `y` coordinates can be adjusted to position the icons as you like.
|
||||
|
||||
::: info Limitation
|
||||
When combining icons, you need to make sure that the `x` and `y` coordinates are within the `viewBox` of the outer icon (24x24).
|
||||
:::
|
||||
|
||||
## With custom SVG elements
|
||||
|
||||
You can also use SVG elements to create your own icons.
|
||||
|
||||
### Example with notification badge
|
||||
|
||||
For example, you can add a notification badge to an icon by using the `circle` SVG element.
|
||||
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation, signal } from "@angular/core";
|
||||
import { LucideMail } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideMail],
|
||||
template: `
|
||||
<svg lucideMail [size]="48">
|
||||
@if (hasUnreadMessages()) {
|
||||
<circle
|
||||
r="3"
|
||||
cx="21"
|
||||
cy="5"
|
||||
stroke="none"
|
||||
fill="#F56565"
|
||||
/>
|
||||
}
|
||||
</svg>`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
protected readonly hasUnreadMessages = signal<boolean>(true);
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### Example with text element
|
||||
|
||||
You can also use the `text` SVG element to add text to your icon.
|
||||
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideFile } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideFile],
|
||||
template: `
|
||||
<svg lucideFile [size]="48">
|
||||
<text
|
||||
x="7.5"
|
||||
y="19"
|
||||
font-size="8"
|
||||
font-family="Verdana,sans-serif"
|
||||
stroke-width="1"
|
||||
>
|
||||
JS
|
||||
</text>
|
||||
</svg>`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
:::
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
title: Filled Icons - Angular
|
||||
description: Fills are not officially supported, but can still be applied using standard SVG attributes. This may in some cases produce acceptable results.
|
||||
---
|
||||
<script setup>
|
||||
import Sandpack from '~/.vitepress/theme/components/editors/SandpackAngular.vue'
|
||||
</script>
|
||||
|
||||
# Filled Icons
|
||||
|
||||
Fills are not officially supported by Lucide.
|
||||
|
||||
However, since the icons are standard SVG elements, SVG attributes such as `fill` can still be applied. Depending on the icon, this may produce acceptable results.
|
||||
|
||||
## Example with stars:
|
||||
|
||||
::: sandpack {template=angular editorHeight=580 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```css /src/app/icon.css
|
||||
.star-rating {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.rating {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
```
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideStar, LucideStarHalf } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideStar, LucideStarHalf],
|
||||
template: `
|
||||
<div class="star-rating">
|
||||
<div class="stars">
|
||||
<svg lucideStar fill="#111" strokeWidth="0" />
|
||||
<svg lucideStar fill="#111" strokeWidth="0" />
|
||||
<svg lucideStar fill="#111" strokeWidth="0" />
|
||||
<svg lucideStar fill="#111" strokeWidth="0" />
|
||||
<svg lucideStar fill="#111" strokeWidth="0" />
|
||||
</div>
|
||||
<div class="stars rating">
|
||||
<svg lucideStar fill="yellow" strokeWidth="0" />
|
||||
<svg lucideStar fill="yellow" strokeWidth="0" />
|
||||
<svg lucideStarHalf fill="yellow" strokeWidth="0" />
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['./app.component.css', './icon.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -0,0 +1,184 @@
|
||||
---
|
||||
title: Global Styling - Angular
|
||||
description: Learn how to style all icons globally in your Angular application using CSS or the provideLucideConfig provider.
|
||||
---
|
||||
<script setup>
|
||||
import Sandpack from '~/.vitepress/theme/components/editors/SandpackAngular.vue'
|
||||
</script>
|
||||
|
||||
# Global Styling
|
||||
|
||||
Lucide icons can be customized using the inputs for [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
|
||||
|
||||
To style all icons globally, you can either use CSS or configure global defaults using `provideLucideConfig`.
|
||||
|
||||
We recommend using CSS for global styling, as it is the most straightforward approach. However, CSS rules may override the `size`, `color`, and `strokeWidth` inputs on individual icons. If you need to keep those inputs configurable per icon, use `provideLucideConfig` instead.
|
||||
|
||||
## Configuring global defaults
|
||||
|
||||
Lucide Angular provides the `provideLucideConfig` provider to set default properties for all icons.
|
||||
|
||||
You can define global defaults (such as `size`, `color`, or `strokeWidth`) while still allowing individual icons to override them through inputs.
|
||||
|
||||
Register the provider in your application configuration or in a top-level component:
|
||||
|
||||
```ts
|
||||
import { ApplicationConfig } from '@angular/core';
|
||||
import { provideLucideConfig } from '@lucide/angular';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideLucideConfig({
|
||||
strokeWidth: 1.5
|
||||
}),
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
## Style by using CSS
|
||||
|
||||
Styling icons globally can be done using CSS.
|
||||
|
||||
All Lucide icons include the `lucide` class. You can use this class in your styles to target every icon in your application.
|
||||
|
||||
- The **color** of the icons can be changed using the [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color) property.
|
||||
- The **size** of the icons can be changed using [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width) and [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height).
|
||||
- The **stroke width** of the icons can be changed using [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width).
|
||||
|
||||
::: sandpack {template=angular editorHeight=300 dependencies="@lucide/angular"}
|
||||
|
||||
```css /src/app/icon.css [active]
|
||||
.lucide {
|
||||
/* Change this! */
|
||||
color: #ffadff;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
```
|
||||
|
||||
```ts /src/app/app.component.ts
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import {
|
||||
LucideCakeSlice,
|
||||
LucideCandy,
|
||||
LucideApple,
|
||||
LucideCookie,
|
||||
LucideMartini,
|
||||
LucideIceCream2,
|
||||
LucideSandwich,
|
||||
LucideWine,
|
||||
LucideDessert,
|
||||
} from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [
|
||||
LucideCakeSlice,
|
||||
LucideCandy,
|
||||
LucideApple,
|
||||
LucideCookie,
|
||||
LucideMartini,
|
||||
LucideIceCream2,
|
||||
LucideSandwich,
|
||||
LucideWine,
|
||||
LucideDessert,
|
||||
],
|
||||
template: `<div class="grid">
|
||||
<svg lucideCakeSlice />
|
||||
<svg lucideCandy />
|
||||
<svg lucideApple />
|
||||
<svg lucideCookie />
|
||||
<svg lucideMartini />
|
||||
<svg lucideIceCream2 />
|
||||
<svg lucideSandwich />
|
||||
<svg lucideWine />
|
||||
<svg lucideDessert />
|
||||
</div>`,
|
||||
styleUrls: ['./app.component.css', './icon.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Absolute stroke width
|
||||
|
||||
To keep the stroke width constant regardless of icon size, apply `vector-effect: non-scaling-stroke` to the icon's children. See [absolute-stroke-width](../basics/stroke-width.md#absolute-stroke-width) for more details.
|
||||
|
||||
::: sandpack {template=angular editorHeight=300 dependencies="@lucide/angular"}
|
||||
|
||||
```css /src/app/icon.css [active]
|
||||
.lucide {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.lucide * {
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
```
|
||||
|
||||
```ts /src/app/app.component.ts
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import {
|
||||
LucideTentTree,
|
||||
LucideCaravan,
|
||||
LucideFlameKindling,
|
||||
LucideMountainSnow,
|
||||
LucideTrees,
|
||||
LucideAxe,
|
||||
LucideMap,
|
||||
LucideCloudMoon,
|
||||
LucideSparkles,
|
||||
} from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [
|
||||
LucideTentTree,
|
||||
LucideCaravan,
|
||||
LucideFlameKindling,
|
||||
LucideMountainSnow,
|
||||
LucideTrees,
|
||||
LucideAxe,
|
||||
LucideMap,
|
||||
LucideCloudMoon,
|
||||
LucideSparkles,
|
||||
],
|
||||
template: `<div class="grid">
|
||||
<svg lucideTentTree />
|
||||
<svg lucideCaravan />
|
||||
<svg lucideFlameKindling />
|
||||
<svg lucideMountainSnow />
|
||||
<svg lucideTrees />
|
||||
<svg lucideAxe />
|
||||
<svg lucideMap />
|
||||
<svg lucideCloudMoon />
|
||||
<svg lucideSparkles />
|
||||
</div>`,
|
||||
styleUrls: ['./app.component.css', './icon.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -0,0 +1,139 @@
|
||||
---
|
||||
title: Icon provider - Angular
|
||||
description: Learn how to register icons globally using provideLucideIcons, including custom and legacy icons.
|
||||
---
|
||||
|
||||
# Icon provider
|
||||
|
||||
You can use the `LucideDynamicIcon` component to render icons by name. To use an icon by name, you must first register it with `provideLucideIcons`.
|
||||
|
||||
Make sure you are well acquainted with [how dependency injection in Angular works](https://angular.dev/guide/di).
|
||||
|
||||
## Registering icons
|
||||
|
||||
Use `provideLucideIcons` in your application providers to register icons.
|
||||
|
||||
```ts [app.config.ts]
|
||||
import { ApplicationConfig } from '@angular/core';
|
||||
import { provideLucideIcons, LucideSquareCheck, LucideCircleAlert } from '@lucide/angular';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideLucideIcons(
|
||||
LucideSquareCheck,
|
||||
LucideCircleAlert,
|
||||
),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
You can then reference the registered icons by name:
|
||||
|
||||
```html [app.html]
|
||||
<svg lucideIcon="square-check"></svg>
|
||||
<svg lucideIcon="circle-alert"></svg>
|
||||
```
|
||||
|
||||
## How names are resolved
|
||||
|
||||
Each registered icon is stored by its icon name. For built-in Lucide icons, this is typically the kebab-case icon name.
|
||||
|
||||
For example, registering `LucideSquareCheck` makes it available as:
|
||||
|
||||
```html
|
||||
<svg lucideIcon="square-check"></svg>
|
||||
```
|
||||
|
||||
If an icon defines aliases, those aliases are also registered automatically.
|
||||
|
||||
## Registering custom icons
|
||||
|
||||
`provideLucideIcons` can also register custom icon data objects.
|
||||
|
||||
```ts [custom-icon.ts]
|
||||
import { LucideIconData } from '@lucide/angular';
|
||||
|
||||
export const MyCustomIcon: LucideIconData = {
|
||||
name: 'my-custom-icon',
|
||||
node: [
|
||||
['circle', { cx: 12, cy: 12, r: 8 }],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
```ts [app.config.ts]
|
||||
import { ApplicationConfig } from '@angular/core';
|
||||
import { provideLucideIcons } from '@lucide/angular';
|
||||
import { MyCustomIcon } from './custom-icon';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideLucideIcons(MyCustomIcon),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
```html [app.html]
|
||||
<svg lucideIcon="my-custom-icon"></svg>
|
||||
```
|
||||
|
||||
## Using legacy icon nodes
|
||||
|
||||
If you have icons in the legacy node format, such as custom icons matching `lucide-angular` or `@lucide/lab`, you can convert them using `lucideLegacyIcon`.
|
||||
|
||||
```ts [app.config.ts]
|
||||
import { ApplicationConfig } from '@angular/core';
|
||||
import { provideLucideIcons, lucideLegacyIcon } from '@lucide/angular';
|
||||
import { CirclePlayIcon } from 'lucide-angular';
|
||||
import { burger } from '@lucide/lab';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideLucideIcons(
|
||||
lucideLegacyIcon('circle-play', CirclePlayIcon, ['play-circle']),
|
||||
lucideLegacyIcon('burger', burger, ['hamburger']),
|
||||
),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
You can then use both the primary name and any aliases:
|
||||
|
||||
```html [app.html]
|
||||
<svg lucideIcon="circle-play"></svg>
|
||||
<svg lucideIcon="play-circle"></svg>
|
||||
<svg lucideIcon="burger"></svg>
|
||||
<svg lucideIcon="hamburger"></svg>
|
||||
```
|
||||
|
||||
## Converting a map of legacy icons
|
||||
|
||||
If you already have a map of legacy icon nodes, use `lucideLegacyIconMap` to convert them into icon data objects.
|
||||
|
||||
```ts [app.config.ts]
|
||||
import { ApplicationConfig } from '@angular/core';
|
||||
import { provideLucideIcons, lucideLegacyIconMap, Circle } from '@lucide/angular';
|
||||
import { UserRoundX } from 'lucide-angular';
|
||||
import { burger } from '@lucide/lab';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideLucideIcons(
|
||||
Circle,
|
||||
...lucideLegacyIconMap({ UserRoundX, burger }),
|
||||
),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
This converts the object keys to kebab-case icon names:
|
||||
|
||||
- `UserRoundX` → `user-round-x`
|
||||
- `burger` → `burger`
|
||||
|
||||
The original object key is also added as an alias, so both of these will work:
|
||||
|
||||
```html
|
||||
<svg lucideIcon="UserRoundX"></svg>
|
||||
<svg lucideIcon="user-round-x"></svg>
|
||||
```
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Typescript - Angular
|
||||
description: All exported types from the `@lucide/angular` package and how to use them in your Angular project.
|
||||
---
|
||||
|
||||
# TypeScript
|
||||
|
||||
List of exported types from the `@lucide/angular` package.
|
||||
These can be used to type your components when using Lucide icons in a TypeScript Angular project
|
||||
|
||||
## Types
|
||||
|
||||
### `LucideIcon`
|
||||
|
||||
Represents a self-containing Lucide icon component type that has a static `icon` property. You can use this type in schemas that declare an icon property.
|
||||
|
||||
```ts
|
||||
export interface LucideIcon extends Type<LucideIconProps> {
|
||||
icon: LucideIconData;
|
||||
}
|
||||
```
|
||||
|
||||
### `LucideIconData`
|
||||
|
||||
A Lucide icon object that fully describes an icon to be displayed.
|
||||
|
||||
```ts
|
||||
export type LucideIconData = {
|
||||
name: string;
|
||||
node: LucideIconNode[];
|
||||
aliases?: string[];
|
||||
};
|
||||
```
|
||||
|
||||
## Type guards
|
||||
|
||||
### `isLucideIconData`
|
||||
|
||||
```ts
|
||||
export function isLucideIconData(icon: unknown): icon is LucideIconData {
|
||||
return true | false
|
||||
}
|
||||
```
|
||||
|
||||
### `isLucideIconComponent`
|
||||
|
||||
```ts
|
||||
export function isLucideIconComponent(icon: unknown): icon is LucideIcon {
|
||||
return true | false
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
title: Lucide Lab - Angular
|
||||
description: Learn how to use icons from Lucide Lab in your Angular application.
|
||||
---
|
||||
<script setup>
|
||||
import Sandpack from '~/.vitepress/theme/components/editors/SandpackAngular.vue'
|
||||
</script>
|
||||
|
||||
# With Lucide Lab or custom icons
|
||||
|
||||
[Lucide Lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
|
||||
|
||||
While they aren't provided as standalone components, they can be still be passed to the `LucideIcon` component the same way as official icons:
|
||||
|
||||
### Directly as LucideIconData
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular,@lucide/lab"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation, signal } from "@angular/core";
|
||||
import { LucideDynamicIcon, lucideLegacyIcon } from '@lucide/angular';
|
||||
import { coconut } from '@lucide/lab';
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
template: `
|
||||
<svg [lucideIcon]="icon()"></svg>
|
||||
`,
|
||||
imports: [LucideDynamicIcon],
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
readonly icon = signal(lucideLegacyIcon('coconut', coconut));
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
|
||||
### As a provided icon by name
|
||||
|
||||
::: sandpack {template=angular editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular,@lucide/lab"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideDynamicIcon } from '@lucide/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
template: `
|
||||
<svg lucideIcon="bat-ball"></svg>
|
||||
`,
|
||||
imports: [LucideDynamicIcon],
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
|
||||
```ts /src/app/app.config.ts
|
||||
import { ApplicationConfig } from '@angular/core';
|
||||
import { lucideLegacyIcon, provideLucideIcons } from '@lucide/angular';
|
||||
import { batBall } from '@lucide/lab';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideLucideIcons(
|
||||
lucideLegacyIcon('bat-ball', batBall)
|
||||
)
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Creating custom icon components
|
||||
|
||||
You can also create your own standalone icon components using `LucideIconBase`.
|
||||
|
||||
Be sure to use an SVG element selector, e.g. `svg[lucide{IconName}]`
|
||||
|
||||
::: sandpack {template=angular editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular,@lucide/lab"}
|
||||
|
||||
```ts /src/icons/bottle-champagne.ts
|
||||
import {
|
||||
LucideIconBase,
|
||||
lucideIconTemplate,
|
||||
lucideLegacyIcon
|
||||
} from '@lucide/angular';
|
||||
import { Component, signal } from '@angular/core';
|
||||
import { bottleChampagne } from '@lucide/lab';
|
||||
|
||||
@Component({
|
||||
selector: 'svg[lucideBottleChampagne]',
|
||||
template: lucideIconTemplate,
|
||||
standalone: true,
|
||||
})
|
||||
export class LucideBottleChampagne extends LucideIconBase {
|
||||
static readonly icon = lucideLegacyIcon('bottle-champagne', bottleChampagne);
|
||||
protected override readonly icon = signal(LucideBottleChampagne.icon);
|
||||
}
|
||||
```
|
||||
|
||||
```ts /src/app/app.component.ts
|
||||
import { Component, ViewEncapsulation, signal } from "@angular/core";
|
||||
import { LucideDynamicIcon, lucideLegacyIcon } from '@lucide/angular';
|
||||
import { LucideBottleChampagne } from "../icons/bottle-champagne";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
template: `<svg lucideBottleChampagne></svg>`,
|
||||
imports: [LucideBottleChampagne],
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Color - Angular
|
||||
description: Learn how to adjust the color of icons in your Angular application using the `color` input or by using parent elements text color value.
|
||||
---
|
||||
<script setup>
|
||||
import Sandpack from '~/.vitepress/theme/components/editors/SandpackAngular.vue'
|
||||
</script>
|
||||
|
||||
# Color
|
||||
|
||||
By default, all icons have the color value: `currentColor`. This keyword uses the element's computed text `color` value to represent the icon color.
|
||||
|
||||
Read more about [ `currentColor` on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword).
|
||||
|
||||
## Adjust the color using the `color` input
|
||||
|
||||
The color can be adjusted by binding the `color` input of the element.
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideSmile } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideSmile],
|
||||
template: `<svg lucideSmile color="#3e9392" />`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## Using parent elements text color value
|
||||
|
||||
Because the color of lucide icons uses `currentColor`, the color of the icon depends on the computed `color` of the element, or it inherits it from its parent.
|
||||
|
||||
For example, if a parent element's color value is `#fff` and one of the children is a lucide icon, the color of the icon will be rendered as `#fff`. This is browser native behavior.
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideThumbsUp } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideThumbsUp],
|
||||
template: `
|
||||
<button style="color:#fff">
|
||||
<svg lucideThumbsUp></svg>
|
||||
Like
|
||||
</button>
|
||||
`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
:::
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
title: Sizing - Angular
|
||||
description: Learn how to adjust the size of icons in your Angular application using the `size` input or by using CSS.
|
||||
---
|
||||
<script setup>
|
||||
import Sandpack from '~/.vitepress/theme/components/editors/SandpackAngular.vue'
|
||||
</script>
|
||||
|
||||
# Sizing
|
||||
|
||||
By default, the size of all icons is `24px` by `24px`. The size is adjustable either by binding the `size` input and CSS.
|
||||
|
||||
## Adjusting the icon size using the `size` input
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideLandmark } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideLandmark],
|
||||
template: `<svg lucideLandmark [size]="64" />`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## Adjusting the icon size via CSS
|
||||
|
||||
The CSS properties `width` and `height` can be used to adjust the icon size.
|
||||
|
||||
::: sandpack {template=angular editorHeight=300 dependencies="@lucide/angular"}
|
||||
|
||||
```css /src/app/icon.css [active]
|
||||
.my-beer-icon {
|
||||
/* Change this! */
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
```
|
||||
|
||||
```ts /src/app/app.component.ts
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideBeer } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideBeer],
|
||||
template: `<svg lucideBeer class="my-beer-icon"></svg>`,
|
||||
styleUrls: ['./app.component.css', './icon.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Dynamically change the icon size based on the font size
|
||||
|
||||
It is possible to resize icons based on font size. This can be achieved using the `em` unit. See this [MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems) for more information on the `em` unit.
|
||||
|
||||
::: sandpack {template=angular editorHeight=300 dependencies="@lucide/angular"}
|
||||
|
||||
```css /src/app/icon.css [active]
|
||||
.my-icon {
|
||||
/* Icon size will relative to font-size of .text-wrapper */
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
/* Change this! */
|
||||
font-size: 96px;
|
||||
|
||||
/* layout stuff */
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
}
|
||||
```
|
||||
|
||||
```ts /src/app/app.component.ts
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideStar } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideStar],
|
||||
template: `<div class="text-wrapper">
|
||||
<svg lucideStar class="my-icon"></svg>
|
||||
<div>Yes</div>
|
||||
</div>`,
|
||||
styleUrls: ['./app.component.css', './icon.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Resizing with Tailwind
|
||||
|
||||
`size-*` utilities can be used to adjust the size of the icon. See the [Tailwind documentation](https://tailwindcss.com/docs/width#setting-both-width-and-height) for more information on the `size-*` utilities.
|
||||
|
||||
```html [app.html]
|
||||
<div>
|
||||
<svg lucidePartyPopper class="size-24"></svg>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
title: Stroke width - Angular
|
||||
description: Learn how to adjust the stroke width of icons in your Angular application using the `strokeWidth` input or adjust the strokeWidth appearance using the `absoluteStrokeWidth` input.
|
||||
---
|
||||
<script setup>
|
||||
import Sandpack from '~/.vitepress/theme/components/editors/SandpackAngular.vue'
|
||||
</script>
|
||||
|
||||
# Stroke width
|
||||
|
||||
All icons are designed with SVG elements using strokes.
|
||||
These have a default stroke width of `2px`.
|
||||
|
||||
The `strokeWidth` can be adjusted to create a different look of the icons.
|
||||
|
||||
## Adjusting stroke width with the `strokeWidth` input
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideFolderLock } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideFolderLock],
|
||||
template: `<svg lucideFolderLock [strokeWidth]="1" />`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## Absolute stroke width
|
||||
|
||||
When binding the `size` input, the icon's stroke width will be relative to its size, this is the default SVG behavior. The `absoluteStrokeWidth` input is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
|
||||
|
||||
This means that when `absoluteStrokeWidth` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
|
||||
|
||||
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
|
||||
|
||||
|
||||
|
||||
### Adjusting stroke width with `absoluteStrokeWidth` input
|
||||
|
||||
Setting `absoluteStrokeWidth` to `true` will make the stroke width absolute.
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideRollerCoaster } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideRollerCoaster],
|
||||
template: `
|
||||
<svg
|
||||
lucideRollerCoaster
|
||||
[size]="96"
|
||||
[absoluteStrokeWidth]="true"
|
||||
></svg>
|
||||
`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
:::
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
title: Getting started - Angular
|
||||
description: This guide will help you get started with Lucide in your Angular project.
|
||||
---
|
||||
<script setup>
|
||||
import OverviewLink from '../../.vitepress/theme/components/base/OverviewLink.vue'
|
||||
import OverviewLinkGrid from '../../.vitepress/theme/components/base/OverviewLinkGrid.vue'
|
||||
import { angularSidebar } from '../../.vitepress/sidebar/angular'
|
||||
</script>
|
||||
|
||||
# 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](https://angular.dev/installation#create-a-new-project) using `@angular/cli`.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
This package requires Angular 17+ and uses standalone components, signals, and zoneless change detection.
|
||||
|
||||
## Installation
|
||||
|
||||
::: code-group
|
||||
|
||||
```sh [pnpm]
|
||||
pnpm add @lucide/angular
|
||||
```
|
||||
|
||||
```sh [yarn]
|
||||
yarn add @lucide/angular
|
||||
```
|
||||
|
||||
```sh [npm]
|
||||
npm install @lucide/angular
|
||||
```
|
||||
|
||||
```sh [bun]
|
||||
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
|
||||
|
||||
```ts
|
||||
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:
|
||||
|
||||
```ts
|
||||
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 |
|
||||
| `absoluteStrokeWidth` | *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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
|
||||
```html
|
||||
<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:
|
||||
|
||||
<OverviewLinkGrid>
|
||||
<OverviewLink v-for="item in angularSidebar[1].items" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
|
||||
</OverviewLinkGrid>
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
title: Lucide for Angular
|
||||
description: A standalone, signal-based, zoneless implementation that makes it easy to integrate icons into your Angular projects.
|
||||
nextPage:
|
||||
- getting-started
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import OverviewLink from '../../.vitepress/theme/components/base/OverviewLink.vue'
|
||||
import OverviewLinkGrid from '../../.vitepress/theme/components/base/OverviewLinkGrid.vue'
|
||||
import { angularSidebar } from '../../.vitepress/sidebar/angular'
|
||||
</script>
|
||||
|
||||
<!--@include: ../../../docs/images/package-logos/lucide-angular.svg -->
|
||||
|
||||
# Lucide for Angular
|
||||
|
||||
A standalone, signal-based, zoneless implementation that makes it easy to integrate icons into your Angular projects.
|
||||
|
||||
List of features:
|
||||
|
||||
- **Easy to Use**: Use icons as standalone Angular components with full dependency injection support.
|
||||
- **Customizable**: Adjust size, color, and other properties via inputs or globally with an Angular provider.
|
||||
- **Tree-shakable**: Only the icons you use are included in your final bundle
|
||||
- **TypeScript Support**: Fully typed components for better developer experience.
|
||||
|
||||
## Overview
|
||||
|
||||
<OverviewLinkGrid>
|
||||
<OverviewLink v-for="item in angularSidebar[0].items.slice(1)" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
|
||||
</OverviewLinkGrid>
|
||||
|
||||
### Basics
|
||||
{{''}}
|
||||
|
||||
<OverviewLinkGrid>
|
||||
<OverviewLink v-for="item in angularSidebar[1].items" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
|
||||
</OverviewLinkGrid>
|
||||
|
||||
### Advanced
|
||||
{{''}}
|
||||
|
||||
<OverviewLinkGrid>
|
||||
<OverviewLink v-for="item in angularSidebar[2].items" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
|
||||
</OverviewLinkGrid>
|
||||
@@ -0,0 +1,214 @@
|
||||
# Migrating from `lucide-angular` ⇒ `@lucide/angular`
|
||||
|
||||
## What changed
|
||||
|
||||
`@lucide/angular` moves from a module + single component based API to a more modern Angular approach:
|
||||
|
||||
- The library defines modern signal-based, standalone components, without zone.js based change detection.
|
||||
- Icons are consumed as standalone imports (one component per icon).
|
||||
- Dynamic icon registration is done via `provideLucideIcons()`, not using `NgModule`.
|
||||
- Static icons use per-icon components for better tree-shaking.
|
||||
- Dynamic icons still use a single dynamic component (`svg[lucideIcon]`).
|
||||
- Global defaults are configured via `provideLucideConfig()`.
|
||||
- Brand icons have been removed, see the next section.
|
||||
|
||||
---
|
||||
|
||||
## Step 1 – Update dependencies
|
||||
|
||||
Remove `lucide-angular`, and add `@lucide/angular`, see:\
|
||||
[Getting Started # Installation](/guide/angular/getting-started.md#installation)
|
||||
|
||||
---
|
||||
|
||||
## Step 2 – Replace `LucideAngularModule.pick(...)` with `provideLucideIcons(...)`
|
||||
|
||||
> Notes:
|
||||
> - Old imports like `AirVentIcon` / `AlarmClock` from `lucide-angular` should be replaced with the new per-icon exports `LucideAirVent` and `LucideAlarmClock`.
|
||||
> - If you mostly used static icons, you may not need to provide them **at all**, please refer to Step 3.
|
||||
|
||||
### Before
|
||||
|
||||
#### NgModule based
|
||||
```ts
|
||||
import { BrowserModule, NgModule } from '@angular/core';
|
||||
import { LucideAngularModule, AirVent, AlarmClock } from 'lucide-angular';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
LucideAngularModule.pick({ AirVent, AlarmClock }),
|
||||
],
|
||||
})
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
#### Standalone
|
||||
|
||||
```ts
|
||||
import { ApplicationConfig } from '@angular/core';
|
||||
import { LucideAngularModule, AirVent, AlarmClock } from 'lucide-angular';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
// ...
|
||||
importProvidersFrom(LucideAngularModule.pick({ AirVent, AlarmClock })),
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
### After
|
||||
```ts
|
||||
import { ApplicationConfig } from '@angular/core';
|
||||
import { provideLucideIcons, LucideAirVent, LucideAlarmClock } from '@lucide/angular';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
// ...
|
||||
provideLucideIcons(
|
||||
LucideAirVent,
|
||||
LucideAlarmClock,
|
||||
),
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Step 3 – Replace `<lucide-angular>` / `<lucide-icon>` / `<i-lucide>` / `<span-lucide>`
|
||||
|
||||
The legacy package rendered everything through a single component. All of these selectors must be migrated to `<svg>` usage.
|
||||
|
||||
### A. Static icons by name
|
||||
|
||||
If the icon is known at build time, just use a static import:
|
||||
|
||||
#### Before
|
||||
```html
|
||||
<lucide-angular name="circle-check"></lucide-angular>
|
||||
```
|
||||
|
||||
#### After
|
||||
```html
|
||||
<svg lucideCircleCheck></svg>
|
||||
```
|
||||
|
||||
### B. Static icons with icon data binding
|
||||
|
||||
#### Before
|
||||
```ts
|
||||
import { CircleCheck } from 'lucide-angular';
|
||||
```
|
||||
|
||||
```html
|
||||
<lucide-icon [img]="CircleCheck"></lucide-icon>
|
||||
```
|
||||
|
||||
#### After
|
||||
|
||||
```ts
|
||||
import { LucideCircleCheck } from '@lucide/angular';
|
||||
```
|
||||
|
||||
```html
|
||||
<svg lucideCircleCheck></svg>
|
||||
```
|
||||
|
||||
...and import `LucideCircleCheck` from `@lucide/angular`.
|
||||
|
||||
---
|
||||
|
||||
### C. Dynamic icons
|
||||
|
||||
If the icon varies at runtime, use the dynamic component:
|
||||
|
||||
#### Before
|
||||
```html
|
||||
<lucide-icon [name]="item.icon"></lucide-icon>
|
||||
```
|
||||
|
||||
#### After
|
||||
```html
|
||||
<svg [lucideIcon]="item.icon"></svg>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Step 4 – Replace `LucideIconConfig` with `provideLucideConfig()`
|
||||
|
||||
### Before
|
||||
```ts
|
||||
import { inject } from '@angular/core';
|
||||
import { LucideIconConfig } from 'lucide-angular';
|
||||
|
||||
inject(LucideIconConfig).size = 12;
|
||||
```
|
||||
|
||||
### After
|
||||
```ts
|
||||
import { provideLucideConfig } from '@lucide/angular';
|
||||
|
||||
providers: [
|
||||
provideLucideConfig({ size: 12 }),
|
||||
]
|
||||
```
|
||||
|
||||
### Where to place it
|
||||
|
||||
- App-wide: `AppModule.providers` or `bootstrapApplication(...providers)`
|
||||
- Feature-level: feature module providers
|
||||
- Component-level (standalone): component `providers`
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### The icon is not being displayed
|
||||
If using per-icon-components:
|
||||
1. Ensure that the icon component is being imported, if using per-icon-components
|
||||
2. Check that the icon name matches exactly (case-sensitive)
|
||||
|
||||
If using the dynamic component:
|
||||
1. Ensure the icon is provided via `provideLucideIcons()` if using string names
|
||||
2. Verify the icon is imported from `@lucide/angular` and not the legacy package
|
||||
|
||||
### TypeScript errors?
|
||||
Make sure you're importing from `@lucide/angular` and not `lucide-angular`.
|
||||
|
||||
### Icons render with wrong defaults
|
||||
Ensure `provideLucideConfig()` is used at the right level.
|
||||
---
|
||||
|
||||
## Removed Brand Icons
|
||||
|
||||
Brand icons are removed in v1. If you are using any of the following icons, you will need to replace them with a custom SVG or an alternative icon:
|
||||
|
||||
- Chromium
|
||||
- Codepen
|
||||
- Codesandbox
|
||||
- Dribbble
|
||||
- Facebook
|
||||
- Figma
|
||||
- Framer
|
||||
- Github
|
||||
- Gitlab
|
||||
- Instagram
|
||||
- LinkedIn
|
||||
- Pocket
|
||||
- RailSymbol (based on the British Rail logo)
|
||||
- Slack
|
||||
|
||||
We recommend to use the official SVG icons provided by the respective brands, most of them can be found on their websites or in their brand guidelines. Alternatively, you can use the icons from [Simple Icons](https://simpleicons.org/), which provides a large collection of brand icons. Also with links to the official Brand Guidelines and SVG icons.
|
||||
|
||||
An [Angular package for Simple Icons](https://github.com/gridatek/semantic-icons/tree/main/libs/simple-icons) with standalone component support is also available.
|
||||
|
||||
---
|
||||
|
||||
## TL;DR
|
||||
- `LucideAngularModule` ⇒ static: removed; dynamic: `LucideIcon`
|
||||
- `LucideAngularModule.pick(...)` ⇒ `provideLucideIcons(...)`
|
||||
- `<lucide-angular name="foo-bar">` ⇒ `<svg lucideFooBar>`
|
||||
- `<lucide-icon [name]="expr">` ⇒ `<svg [lucideIcon]="expr">`
|
||||
- `<lucide-icon [img]="expr">` ⇒ `<svg [lucideIcon]="expr">`
|
||||
- `LucideIconConfig` ⇒ `provideLucideConfig(...)`
|
||||
- Replace brand icon usages with [`simple-icons`](https://github.com/gridatek/semantic-icons/tree/main/libs/simple-icons).
|
||||
Reference in New Issue
Block a user