mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-23 23:29:22 +01:00
e50582e93e
* Add useIconComponent, lucide-react * Add concept useIconComponent * add useIconComponents to packages * Add icon component * Add icon component * Add tests for react packages * Reset changes in icons * Add types * Add support for Icon components in Lucide Vue Next * update tests * Update tests * Enable Svelte component * Fix lucide-react-native tests * Update Solid package * update snapshots * Add docs * add docs * Update tests * Formatting * Formatting * Update package lock * Remove `useIconComponent` * Update guides * Update exports preact and solid package * Formatting * Format createIcons.ts * Add lucide lab repo link in docs
135 lines
3.3 KiB
Markdown
135 lines
3.3 KiB
Markdown
# Lucide Angular
|
|
|
|
Implementation of the lucide icon library for Angular applications.
|
|
|
|
## Installation
|
|
|
|
::: code-group
|
|
|
|
```sh [pnpm]
|
|
pnpm install lucide-angular
|
|
```
|
|
|
|
```sh [yarn]
|
|
yarn add lucide-angular
|
|
```
|
|
|
|
```sh [npm]
|
|
npm install lucide-angular
|
|
```
|
|
|
|
:::
|
|
|
|
## How to use
|
|
|
|
### Step 1: Import `LucideAngularModule`
|
|
|
|
In any Angular module you wish to use Lucide icons in, you have to import `LucideAngularModule`, and pick any icons you wish to use:
|
|
|
|
```js
|
|
import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular';
|
|
|
|
@NgModule({
|
|
imports: [
|
|
LucideAngularModule.pick({File, Home, Menu, UserCheck})
|
|
]
|
|
})
|
|
export class AppModule { }
|
|
```
|
|
|
|
### Step 2: Use the icons in templates
|
|
|
|
Within your templates you may now use one of the following component tags to insert an icon:
|
|
|
|
```html
|
|
<lucide-angular name="file" class="my-icon"></lucide-angular>
|
|
<lucide-icon name="home" class="my-icon"></lucide-icon>
|
|
<i-lucide name="menu" class="my-icon"></i-lucide>
|
|
<span-lucide name="user-check" class="my-icon"></span-lucide>
|
|
```
|
|
|
|
### Props
|
|
|
|
You can pass additional props to adjust the icon appearance.
|
|
|
|
| name | type | default |
|
|
| --------------------- | --------- | ------------ |
|
|
| `size` | *number* | 24 |
|
|
| `color` | *string* | currentColor |
|
|
| `strokeWidth` | *number* | 2 |
|
|
| `absoluteStrokeWidth` | *boolean* | false |
|
|
|
|
```html
|
|
<i-lucide name="home" [size]="48" color="red" [strokeWidth]="1"></i-lucide>
|
|
```
|
|
|
|
### Global configuration
|
|
|
|
You can inject the `LucideIconConfig` service in your root component to globally configure the default property values as defined above.
|
|
|
|
### Styling using a custom CSS class
|
|
|
|
Any extra HTML attribute is ignored, but the `class` attribute
|
|
is passed onto the internal SVG image element and it can be used to style it:
|
|
|
|
```css
|
|
svg.my-icon {
|
|
width: 12px;
|
|
height: 12px;
|
|
stroke-width: 3;
|
|
}
|
|
```
|
|
|
|
## Injecting multiple icon providers
|
|
|
|
You may provide additional icons using the `LUCIDE_ICONS` injection token,
|
|
which accepts multiple providers of the interface `LucideIconsProviderInterface`
|
|
with the utility class `LucideIconsProvider` available for easier usage:
|
|
|
|
```js
|
|
import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
|
|
import { MyIcon } from './icons/my-icon';
|
|
|
|
const myIcons = {MyIcon};
|
|
|
|
@NgModule({
|
|
providers: [
|
|
{provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(myIcons)},
|
|
]
|
|
})
|
|
export class AppModule { }
|
|
```
|
|
|
|
To add custom icons, you will first need to convert them to an [svgson format](https://github.com/elrumordelaluz/svgson).
|
|
|
|
## Loading all icons
|
|
|
|
::: danger
|
|
You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size.
|
|
:::
|
|
|
|
```js
|
|
import { icons } from 'lucide-angular';
|
|
|
|
...
|
|
|
|
LucideAngularModule.pick(icons)
|
|
```
|
|
|
|
## 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.
|
|
They can be used in the same way as the official icons.
|
|
|
|
```js
|
|
import { LucideAngularModule } from 'lucide-angular';
|
|
import { burger } from '@lucide/lab';
|
|
|
|
@NgModule({
|
|
imports: [
|
|
LucideAngularModule.pick({ burger })
|
|
]
|
|
})
|
|
export class AppModule { }
|
|
```
|