This is a Lucide icon ${MessageSquare}
`); }); const hostname = '127.0.0.1'; const port = 3000; server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); }); ``` -------------------------------- ### Install Lucide for Vue Source: https://lucide.dev/guide/installation Install the Lucide library for Vue applications. ```sh pnpm add @lucide/vue ``` ```sh yarn add @lucide/vue ``` ```sh npm install @lucide/vue ``` ```sh bun add @lucide/vue ``` -------------------------------- ### Installation Source: https://lucide.dev/guide/vue/getting-started Commands to install the Lucide Vue package using various package managers. ```APIDOC ## Installation ### Description Install the @lucide/vue package to use Lucide icons in your Vue project. ### Commands - **pnpm**: `pnpm add @lucide/vue` - **yarn**: `yarn add @lucide/vue` - **npm**: `npm install @lucide/vue` - **bun**: `bun add @lucide/vue` ``` -------------------------------- ### Example Using CDN with Customization Source: https://lucide.dev/guide/lucide/getting-started Demonstrates using Lucide with a CDN and the `createIcons` function, including custom classes and attributes. ```html ``` -------------------------------- ### Install Lucide React Source: https://lucide.dev/guide/react/getting-started Install the lucide-react package using your preferred package manager. ```sh pnpm add lucide-react ``` ```sh yarn add lucide-react ``` ```sh npm install lucide-react ``` ```sh bun add lucide-react ``` -------------------------------- ### Install Lucide React Native Source: https://lucide.dev/guide/packages/lucide-react-native Install the package using your preferred package manager. Ensure react-native-svg is installed and compatible. ```sh pnpm add lucide-react-native ``` ```sh yarn add lucide-react-native ``` ```sh npm install lucide-react-native ``` ```sh bun add lucide-react-native ``` -------------------------------- ### Install lucide-preact Source: https://lucide.dev/guide/packages/lucide-preact Add the lucide-preact package to your project using your preferred package manager. ```sh pnpm add lucide-preact ``` ```sh yarn add lucide-preact ``` ```sh npm install lucide-preact ``` ```sh bun add lucide-preact ``` -------------------------------- ### Install Lucide with Package Managers Source: https://lucide.dev/guide/lucide/getting-started Install Lucide using your preferred package manager. ```sh pnpm add lucide ``` ```sh yarn add lucide ``` ```sh npm install lucide ``` ```sh bun add lucide ``` -------------------------------- ### Install Lucide Vue package Source: https://lucide.dev/guide/vue/getting-started Install the package using your preferred package manager. ```sh pnpm add @lucide/vue ``` ```sh yarn add @lucide/vue ``` ```sh npm install @lucide/vue ``` ```sh bun add @lucide/vue ``` -------------------------------- ### Install @lucide/angular with bun Source: https://lucide.dev/guide/packages/angular Use this command to add the @lucide/angular package to your project using bun. ```sh bun add @lucide/angular ``` -------------------------------- ### Use Generic Icon Component Source: https://lucide.dev/guide/packages/lucide-astro Implementation example for the generic icon component. ```astro --- import LucideIcon from './LucideIcon.astro'; ---
```
```html
```
```html
```
--------------------------------
### Provide Lucide Lab Icon by Name in Angular
Source: https://lucide.dev/guide/angular/advanced/with-lucide-lab
Register custom icons from Lucide Lab using `provideLucideIcons` and `lucideLegacyIcon` for use by name in templates. Requires installation of `@lucide/lab`.
```typescript
import { Component, ViewEncapsulation } from "@angular/core";
import { LucideDynamicIcon } from '@lucide/angular';
@Component({
selector: 'app',
template: `
`,
imports: [LucideDynamicIcon],
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class App {
}
```
```typescript
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)
)
]
};
```
--------------------------------
### Use Lucide Lab Icon Directly as LucideIconData in Angular
Source: https://lucide.dev/guide/angular/advanced/with-lucide-lab
Pass custom icons from Lucide Lab directly to the LucideIcon component using `lucideLegacyIcon`. Ensure `@lucide/lab` is installed.
```typescript
import { Component, ViewEncapsulation, signal } from "@angular/core";
import { LucideDynamicIcon, lucideLegacyIcon } from '@lucide/angular';
import { coconut } from '@lucide/lab';
@Component({
selector: 'app',
template: `
`,
imports: [LucideDynamicIcon],
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class App {
readonly icon = signal(lucideLegacyIcon('coconut', coconut));
}
```
--------------------------------
### Adjust icon stroke width with `strokeWidth` prop
Source: https://lucide.dev/guide/preact/basics/stroke-width
Use the `strokeWidth` prop to directly control the thickness of the icon's strokes. This example sets the stroke width to 1px.
```jsx
import { h } from "preact";
import { FolderLock } from "lucide-preact";
function App() {
return (