Compare commits

...

26 Commits

Author SHA1 Message Date
Karsa
2bb9c9e059 test(packages/icons): update absoluteStrokeWidth unit test 2025-12-22 10:55:06 +01:00
Karsa
3b0c39cf13 fix(packages/icons): update absoluteStrokeWidth implementation 2025-12-22 10:51:37 +01:00
Karsa
76861c621f fix(packages/icons): update readme and documentation 2025-12-22 09:37:15 +01:00
Eric Fennis
4869c6409a Merge branch 'next' into package/icons 2025-12-22 08:14:13 +01:00
Eric Fennis
5fab4e7bc8 Merge branch 'main' of https://github.com/lucide-icons/lucide into next 2025-12-22 08:12:08 +01:00
Karsa
d391bda369 feat: add Android to brand stopwords (#3895) 2025-12-22 07:54:08 +01:00
Karsa
eae3dc5f94 fix(pnpm): update lockfile 2025-12-19 14:56:52 +01:00
Karsa
00954a6203 Merge branch 'main' into package/icons 2025-12-19 14:56:20 +01:00
Karsa
d152818621 feat(packages/icons): rename from packages/lucide-icons => packages/icons 2025-12-19 10:00:45 +01:00
Karsa
abff584694 fix(packages/icons): fix linting issues in configs 2025-12-12 18:24:46 +01:00
Karsa
5d8110882d fix(.github/ISSUE_TEMPLATE): fix linting issue (@ is a reserved character) 2025-12-12 18:23:26 +01:00
Karsa
2ea256381c docs(packages/icons): add documentation for various helpers and types 2025-12-12 18:20:52 +01:00
Karsa
b88bcae614 fix(packages/icons): update github actions 2025-12-12 18:20:52 +01:00
Karsa
1bbcaf8c1c fix(packages/icons): update package, remove UMD export 2025-12-12 18:20:52 +01:00
Karsa
68ea9b2736 fix: fixed linting issues introduced in c4e5730bc4 (#3858) 2025-12-12 18:20:52 +01:00
Karsa
620b478a2e feat(packages): added initial commit of @lucide/icons 2025-12-12 18:19:31 +01:00
Karsa
6c3bd53c35 feat(packages): added lucide icons package skeleton 2025-12-12 18:19:31 +01:00
Eric Fennis
881e733159 Merge branch 'main' of https://github.com/lucide-icons/lucide into next 2025-12-12 09:34:11 +01:00
Eric Fennis
d58a2e43c6 Merge branch 'next' of https://github.com/lucide-icons/lucide into next 2025-11-27 10:58:43 +01:00
Eric Fennis
5ecf78bb8a Merge branch 'main' of https://github.com/lucide-icons/lucide into next 2025-11-27 10:58:34 +01:00
Eric Fennis
aa8f74eb9e fix(icons): Remove brand icons (#3639)
* Remove brand icons

* Apply feedback

* adjust schema
2025-11-27 10:56:32 +01:00
Eric Fennis
7327637532 Merge branch 'main' of https://github.com/lucide-icons/lucide into next 2025-11-27 10:56:13 +01:00
Eric Fennis
08bd4b33a0 Merge branch 'main' of https://github.com/lucide-icons/lucide into next 2025-11-21 14:58:50 +01:00
Eric Fennis
b1675c4c33 chore(packages): Remove umd exports (#3641)
* Remove UMD export

* Revert package file change
2025-10-16 13:49:19 +02:00
Eric Fennis
758fa4b75f Merge branch 'main' into next 2025-09-19 13:59:13 +02:00
Eric Fennis
7bbb1e1fea feat(@lucide/vue): Rename Vue package name to @lucide/vue (#3337)
* Remove old vue 2 package

* Add @lucide/vue package

* Remove old vue 2 doc

* Update docs

* Adjust export template

* Adjust vue package!

* Fix tests

* Format code

* Update packages/vue/src/Icon.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Adjust vue package in docs

* Update deadlinks

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-09-11 14:38:34 +02:00
139 changed files with 2091 additions and 1675 deletions

View File

@@ -9,9 +9,3 @@ strikethrough
touchpad
ungroup
toc
# Brands
codepen
codesandbox
dribbble
x.com

View File

@@ -23,6 +23,7 @@ body:
- label: lucide-vue
- label: lucide-vue-next
- label: lucide-astro
- label: '@lucide/icons'
- label: Figma plugin
- label: source/main
- label: other/not relevant

View File

@@ -23,6 +23,7 @@ body:
- label: lucide-vue
- label: lucide-vue-next
- label: lucide-astro
- label: '@lucide/icons'
- label: Figma plugin
- label: all JS packages
- label: site

6
.github/labeler.yml vendored
View File

@@ -85,6 +85,12 @@
- any-glob-to-any-file:
- 'packages/astro/*'
# For changes in the @lucide/icons package
❇️ lucide-icons:
- changed-files:
- any-glob-to-any-file:
- 'packages/lucide-icons/*'
# For changes in the lucide static package
🪨 static package:
- changed-files:

43
.github/workflows/icons.yml vendored Normal file
View File

@@ -0,0 +1,43 @@
name: Lucide Icons Checks
on:
pull_request:
paths:
- packages/icons/**
- packages/shared/**
- tools/build-icons/**
- tools/rollup-plugins/**
- pnpm-lock.yaml
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build
run: pnpm --filter @lucide/icons build
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v6
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Test
run: pnpm --filter @lucide/icons test

43
.github/workflows/lucide-vue.yml vendored Normal file
View File

@@ -0,0 +1,43 @@
name: Lucide Vue checks
on:
pull_request:
paths:
- packages/lucide-vue/**
- packages/shared/**
- tools/build-icons/**
- tools/rollup-plugins/**
- pnpm-lock.yaml
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build
run: pnpm --filter @lucide/vue build
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
- uses: actions/setup-node@v4
with:
cache: 'pnpm'
node-version-file: 'package.json'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Test
run: pnpm --filter @lucide/vue test

View File

@@ -60,6 +60,8 @@ jobs:
'lucide-svelte',
'@lucide/astro',
'@lucide/svelte',
'@lucide/icons',
'@lucide/vue',
]
steps:
- uses: actions/checkout@v6

View File

@@ -2,6 +2,7 @@
"adobe": "Adobe",
"airplay": "AirPlay",
"amazon": "Amazon",
"android": "Android",
"angular": "Angular",
"aws": "AWS",
"azure": "Azure",

View File

@@ -1,5 +0,0 @@
{
"$schema": "../category.schema.json",
"title": "Brands",
"icon": "facebook"
}

View File

@@ -15,10 +15,6 @@
"name": "arrows",
"title": "Arrows"
},
{
"name": "brands",
"title": "Brands"
},
{
"name": "buildings",
"title": "Buildings"

View File

@@ -31,20 +31,12 @@
}
]
},
"lucide-vue-next": {
"@lucide/vue": {
"order": 2,
"icon": "vue-next",
"icon": "vue",
"docsAlias": "lucide-vue",
"packageDirname": "vue",
"shields": [
{
"alt": "npm",
"src": "https://img.shields.io/npm/v/lucide-vue-next",
"href": "https://www.npmjs.com/package/lucide-vue-next"
},
{
"alt": "npm",
"src": "https://img.shields.io/npm/dw/lucide-vue-next",
"href": "https://www.npmjs.com/package/lucide-vue-next"
}
]
},
"lucide-svelte": {
@@ -161,5 +153,23 @@
"href": "https://www.npmjs.com/package/lucide-static"
}
]
},
"@lucide/icons": {
"docsAlias": "icons",
"packageDirname": "icons",
"order": 10,
"icon": "ts",
"shields": [
{
"alt": "npm",
"src": "https://img.shields.io/npm/v/@lucide/icons",
"href": "https://www.npmjs.com/package/@lucide/icons"
},
{
"alt": "npm",
"src": "https://img.shields.io/npm/dw/@lucide/icons",
"href": "https://www.npmjs.com/package/@lucide/icons"
}
]
}
}

View File

@@ -43,7 +43,7 @@ export default App;
language: 'vue',
title: 'Vue',
code: `<script setup>
import { $PascalCase } from 'lucide-vue-next';
import { $PascalCase } from '@lucide/vue';
</script>
<template>

View File

@@ -74,7 +74,7 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
},
{
text: 'Lucide Vue',
link: '/guide/packages/lucide-vue-next',
link: '/guide/packages/lucide-vue',
},
{
text: 'Lucide Svelte',
@@ -104,6 +104,10 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
text: 'Lucide Static',
link: '/guide/packages/lucide-static',
},
{
text: 'Icon data & helpers',
link: '/guide/packages/icons',
},
],
},
{

View File

@@ -13,9 +13,9 @@ export default {
label: 'Lucide documentation for React',
},
{
name: 'lucide-vue-next',
name: 'lucide-vue',
logo: '/framework-logos/vue.svg',
label: 'Lucide documentation for Vue 3',
label: 'Lucide documentation for Vue',
},
{
name: 'lucide-svelte',

View File

@@ -29,7 +29,12 @@ const props = defineProps<{
const iconComponent = computed(() => {
if (!props.name || !props.iconNode) return null;
return createLucideIcon(props.name, props.iconNode);
try {
return createLucideIcon(props.name, props.iconNode);
} catch (error) {
console.warn(`Icon ${props.name} not found, using fallback`);
return null;
}
});
const CalendarIcon = createLucideIcon('calendar', Calendar.iconNode);
@@ -61,7 +66,7 @@ const prettyName = props.name
</script>
<template>
<section class="showcase">
<section class="showcase" v-if="iconComponent">
<h2 class="title">See this icon in action</h2>
<div class="showcase-grid">
<div class="showcase-item column">

View File

@@ -79,6 +79,16 @@ declare module "lucide-react-native" {
}
```
```ts [@lucide-icons]
declare module "@lucide/icons" {
// Prefixed import names
export * from "@lucide/icons/dist/lucide-icons.prefixed";
// or
// Suffixed import names
export * from "@lucide/icons/dist/lucide-icons.suffixed";
}
```
:::
Place this in your project root or in a folder where your tsconfig.json is located, or locate it in your defined type directory.

View File

@@ -64,25 +64,24 @@ Implementation of the lucide icon library for Vue applications.
::: code-group
```sh [pnpm]
pnpm add lucide-vue-next
pnpm add @lucide/vue
```
```sh [yarn]
yarn add lucide-vue-next
yarn add @lucide/vue
```
```sh [npm]
npm install lucide-vue-next
npm install @lucide/vue
```
```sh [bun]
bun add lucide-vue-next
bun add @lucide/vue
```
:::
For more details, see the [documentation](packages/lucide-vue-next.md).
For Vue 2 use the `lucide-vue` package.
For more details, see the [documentation](packages/lucide-vue.md).
## Svelte
@@ -91,22 +90,22 @@ Implementation of the lucide icon library for Svelte applications.
::: code-group
```sh [pnpm]
pnpm add lucide-svelte
pnpm add @lucide/svelte
```
```sh [yarn]
yarn add lucide-svelte
yarn add @lucide/svelte
```
```sh [npm]
npm install lucide-svelte
npm install @lucide/svelte
```
```sh [bun]
bun add lucide-svelte
bun add @lucide/svelte
```
:::
> `@lucide/svelte` is only for Svelte 5, for Svelte 4 use the `lucide-svelte` package.
For more details, see the [documentation](packages/lucide-svelte.md).

View File

@@ -0,0 +1,172 @@
# @lucide/icons
`@lucide/icons` is a helper library that exports Lucide **icon data** in a tree-shakable format, also providing utilities for dynamic importing icons.
It intentionally ships **no real rendering logic or components** — other packages (for example [`@lucide/angular`](http://npmjs.com/package/@lucide/angular)) can consume this data to render icons in their respective
frameworks. You can also use this package to build third-party integrations for frameworks we don't (yet) support.
## Installation
::: code-group
```sh [pnpm]
pnpm install @lucide/icons
```
```sh [yarn]
yarn add @lucide/icons
```
```sh [npm]
npm install @lucide/icons
```
```sh [bun]
bun add @lucide/icons
```
:::
## Icon data format
Each icon is described by the following interface:
```typescript
export type LucideIconData = {
name: string;
node: LucideIconNode[];
} & (
| { size: number }
| { width: number; height: number; }
);
```
| name | type | description |
|------------------------------|--------------------|--------------------------------------------------------------------|
| `name` | `string` | The name of the icon. |
| `node` | `LucideIconNode[]` | SVG child nodes as `[tagName, attributes]` tuples. |
| `size` or `width` & `height` | `number` | The dimensions of the icon (`size` is shorthand for square icons). |
## How to use
Icons can be imported individually. Only the icons you import end up referenced by your application code — the rest will be eliminated by tree-shaking.
```ts
import { House } from '@lucide/icons';
// House is icon data (not a rendered component).
```
## Building icons
`@lucide/icons` ships small helpers that convert Lucide icon data into different render-ready outputs.
All builders accept the same `params` object (`LucideBuildParams`) to customize the generated SVG.
### Build parameters
The following parameters are supported (names reflect the current implementation):
| param | type | effect |
|-----------------------|--------------------------|------------------------------------------------------------------------------------|
| `color` | `string` | Sets `stroke` (defaults to `currentColor`). |
| `size` | `number` | Sets both `width` and `height` (defaults to 24). |
| `width` | `number` | Sets `width` only. |
| `height` | `number` | Sets `height` only. |
| `strokeWidth` | `number` | Sets `stroke-width` (defaults to 2). |
| `absoluteStrokeWidth` | `boolean` | Adds [`vector-effect="non-scaling-stroke"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/vector-effect) to child elements. |
| `className` | `string` | Appended to the generated `class` attribute. |
| `attributes` | `Record<string, string>` | Add or override any generated SVG attributes (including `class`, `viewBox`, etc.). |
::: info
SVG attributes generated by the builders include a default Lucide setup (`xmlns`, `viewBox`, `fill="none"`, `stroke="currentColor"`, `stroke-width="2"`, `stroke-linecap="round"`, `stroke-linejoin="round"`), plus a class string of the form: `lucide lucide-{iconName}`.
:::
### `buildLucideIconNode`
Creates a root SVG node in an svgson-like format:
```ts
import { buildLucideIconNode } from '@lucide/icons/builders';
import { House } from '@lucide/icons';
const node = buildLucideIconNode(House, {
size: 32,
strokeWidth: 1.5,
className: 'my-icon',
});
// -> ['svg', attributes, children]
```
This is useful if you want to plug Lucide icons into your own renderer, templating system, or framework integration.
### `buildLucideSvg`
Creates an SVG string:
```ts
import { buildLucideSvg } from '@lucide/icons/builders';
import { House } from '@lucide/icons';
const svg = buildLucideSvg(House, { size: 24, color: '#111' });
```
### `buildLucideIconElement`
Creates an actual DOM element (SVG) within the provided document:
```ts
import { buildLucideIconElement } from '@lucide/icons/builders';
import { House } from '@lucide/icons';
const el = buildLucideIconElement(document, House, { size: 24 });
document.body.appendChild(el);
```
### `buildLucideDataUri`
Creates a base64-encoded SVG data URI from a Lucide icon object.
This helper works in both browsers and Node.js:
- In browsers it uses `btoa` (with proper UTF-8 handling)
- In Node.js it falls back to `Buffer`
```ts
import { buildLucideDataUri } from '@lucide/icons/builders';
import { House } from '@lucide/icons';
const uri = buildLucideDataUri(House, { size: 24 });
```
The returned value can be used directly in places such as:
- `<img src="...">`
- CSS `background-image`
- Canvas drawing
- Inline data URLs in HTML or SVG
::: tip Environment notes
- The SVG is encoded as UTF-8 before base64 conversion to ensure correct handling of non-ASCII characters.
- No runtime configuration is required — the function automatically selects the appropriate encoding strategy.
- If neither `btoa` nor `Buffer` is available, an error is thrown.
:::
## Dynamic imports
Dynamic imports are useful when you only know the icon name at runtime (for example, icon names stored in a database or a CMS). For purely static use cases, prefer direct imports for the best tree-shaking results.
::: tip
Validate `iconName` before indexing the map (and provide a fallback icon) to avoid runtime errors.
:::
## Dynamic imports
Dynamic imports are useful when the icon name is only known at runtime (for example, icon names stored in a CMS or database). For purely static usage, prefer direct imports for maximum tree-shaking.
```ts
import { lucideDynamicIconImports } from '@lucide/icons/dynamic';
const name = 'house';
const icon = await lucideDynamicIconImports[name]?.();
if (!icon) {
// handle unknown icon name (fallback)
}
```

View File

@@ -30,14 +30,7 @@ This package includes the following implementations of Lucide icons:
SVG sprites and icon fonts include **all icons**, which can significantly increase your app's bundle size and load time.
For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using:
- [lucide](lucide)
- [lucide-react](lucide-react)
- [lucide-vue](lucide-vue)
- [lucide-vue-next](lucide-vue-next)
- [lucide-angular](lucide-angular)
- [lucide-preact](lucide-preact)
For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using one of the framework-specific [packages](../../packages).
:::
## Installation

View File

@@ -1,148 +0,0 @@
# Lucide Vue Next
Vue 3 components for Lucide icons that leverage the Composition API and modern Vue features. Each icon is a reactive Vue component that renders as an inline SVG, providing excellent performance and developer experience in Vue 3 applications.
**What you can accomplish:**
- Use icons as Vue 3 components with full reactivity and TypeScript support
- Bind icon properties to reactive data and computed values
- Customize icons with props, slots, and Vue's powerful templating system
- Integrate seamlessly with Vue 3's Composition API and script setup syntax
- Build dynamic interfaces where icons respond to application state changes
## Installation
::: code-group
```sh [pnpm]
pnpm add lucide-vue-next
```
```sh [yarn]
yarn add lucide-vue-next
```
```sh [npm]
npm install lucide-vue-next
```
```sh [bun]
bun add lucide-vue-next
```
:::
## How to use
Lucide is built with ES Modules, so it's completely tree-shakable.
Each icon can be imported as a Vue 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.
### Example
You can pass additional props to adjust the icon.
```vue
<script setup>
import { Camera } from 'lucide-vue-next';
</script>
<template>
<Camera
color="red"
:size="32"
/>
</template>
```
## Props
| name | type | default |
| ----------------------- | --------- | ------------ |
| `size` | *number* | 24 |
| `color` | *string* | currentColor |
| `stroke-width` | *number* | 2 |
| `absoluteStrokeWidth` | *boolean* | false |
| `default-class` | *string* | lucide-icon |
### Applying props
To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
```vue
<template>
<Camera fill="red" />
</template>
```
## 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 by using the `Icon` component.
All props like regular lucide icons can be passed to adjust the icon appearance.
### Using the `Icon` component
This creates a single icon based on the iconNode passed and renders a Lucide icon component.
```vue
<script setup>
import { Icon } from 'lucide-vue-next';
import { baseball } from '@lucide/lab';
</script>
<template>
<Icon :iconNode="baseball" />
</template>
```
## One generic icon component
It is possible to create one generic icon component to load icons, but it is not recommended.
::: danger
The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
:::
### Icon Component Example
```vue
<script setup>
import { computed } from 'vue';
import * as icons from "lucide-vue-next";
const props = defineProps({
name: {
type: String,
required: true
},
size: Number,
color: String,
strokeWidth: Number,
defaultClass: String
})
const icon = computed(() => icons[props.name]);
</script>
<template>
<component
:is="icon"
:size="size"
:color="color"
:stroke-width="strokeWidth" :default-class="defaultClass"
/>
</template>
```
### Using the Icon Component
All other props listed above also work on the `Icon` Component.
```vue
<template>
<div id="app">
<Icon name="Airplay" />
</div>
</template>
```

View File

@@ -9,28 +9,24 @@ Vue 2 components for Lucide icons that integrate with Vue's Options API and temp
- Build applications using Vue 2's familiar syntax and patterns
- Bridge the gap while planning migration to Vue 3
::: danger
This package is deprecated. Vue 2 is EOF See [Announcement](https://v2.vuejs.org/eol/). Migrate to Vue 3.
:::
## Installation
::: code-group
```sh [pnpm]
pnpm add lucide-vue
pnpm add @lucide/vue
```
```sh [yarn]
yarn add lucide-vue
yarn add @lucide/vue
```
```sh [npm]
npm install lucide-vue
npm install @lucide/vue
```
```sh [bun]
bun add lucide-vue
bun add @lucide/vue
```
:::
@@ -43,21 +39,19 @@ Each icon can be imported as a Vue component, which renders an inline SVG Elemen
### Example
Additional props can be passed to adjust the icon:
You can pass additional props to adjust the icon.
```vue
<template>
<Camera color="red" :size="32" />
</template>
<script>
import { Camera } from 'lucide-vue';
export default {
name: 'My Component',
components: { Camera }
};
<script setup>
import { Camera } from '@lucide/vue';
</script>
<template>
<Camera
color="red"
:size="32"
/>
</template>
```
## Props
@@ -80,6 +74,28 @@ To customize the appearance of an icon, you can pass custom properties as props
</template>
```
## 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 by using the `Icon` component.
All props like regular lucide icons can be passed to adjust the icon appearance.
### Using the `Icon` component
This creates a single icon based on the iconNode passed and renders a Lucide icon component.
```vue
<script setup>
import { Icon } from '@lucide/vue';
import { baseball } from '@lucide/lab';
</script>
<template>
<Icon :iconNode="baseball" />
</template>
```
## One generic icon component
It is possible to create one generic icon component to load icons, but it is not recommended.
@@ -91,30 +107,37 @@ The example below imports all ES Modules, so exercise caution when using it. Imp
### Icon Component Example
```vue
<template>
<component :is="icon" />
</template>
<script setup>
import { computed } from 'vue';
import * as icons from "@lucide/vue";
<script>
import * as icons from 'lucide-vue';
const props = defineProps({
name: {
type: String,
required: true
},
size: Number,
color: String,
strokeWidth: Number,
defaultClass: String
})
export default {
props: {
name: {
type: String,
required: true
}
},
computed: {
icon() {
return icons[this.name];
}
}
};
const icon = computed(() => icons[props.name]);
</script>
<template>
<component
:is="icon"
:size="size"
:color="color"
:stroke-width="strokeWidth" :default-class="defaultClass"
/>
</template>
```
#### Using the Icon Component
### Using the Icon Component
All other props listed above also work on the `Icon` Component.
```vue
<template>

View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path fill="#3178C6" d="M24 0H0v24h24V0Z"/>
<path fill="#fff" fill-rule="evenodd" d="M14.11 18.797v2.588c.421.215.918.375 1.49.487a9.45 9.45 0 0 0 1.819.16 8.35 8.35 0 0 0 1.772-.179 4.407 4.407 0 0 0 1.472-.59c.421-.272.75-.628 1.003-1.07.243-.44.365-.983.365-1.63 0-.47-.065-.882-.206-1.238a2.98 2.98 0 0 0-.61-.947 4.48 4.48 0 0 0-.946-.74 11.05 11.05 0 0 0-1.247-.62c-.338-.14-.647-.27-.919-.412a4.124 4.124 0 0 1-.684-.403 1.784 1.784 0 0 1-.44-.44.928.928 0 0 1-.15-.525c0-.178.046-.338.14-.478.093-.141.225-.263.384-.366.169-.103.375-.178.619-.234.244-.057.515-.085.806-.085.216 0 .44.019.684.047.244.028.479.084.722.15.244.066.479.15.713.253.225.103.44.225.637.356v-2.418a6.524 6.524 0 0 0-1.293-.338 10.228 10.228 0 0 0-1.604-.112c-.618 0-1.2.065-1.753.197a4.42 4.42 0 0 0-1.453.618c-.422.282-.75.638-.993 1.07-.244.43-.366.955-.366 1.555 0 .77.225 1.425.666 1.978.45.544 1.125 1.004 2.024 1.388.357.15.685.29.994.431.31.14.572.281.797.44.225.16.403.32.534.498.132.178.197.384.197.61a.921.921 0 0 1-.121.468c-.085.14-.207.262-.366.375-.16.112-.366.187-.619.244a3.957 3.957 0 0 1-.862.084 4.938 4.938 0 0 1-1.67-.3 4.752 4.752 0 0 1-1.537-.872Zm-4.313-6.45h3.328V10.22H3.844v2.128h3.31v9.497h2.633v-9.497h.01Z" clip-rule="evenodd"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="32" fill="none" viewBox="0 0 128 32">
<rect width="128" height="32" rx="8" fill="#fff"/>
<path fill="#1b1b1f" d="M78.2 22.17a4.5 4.5 0 0 1-2.27-.55 3.7 3.7 0 0 1-1.46-1.55 5.2 5.2 0 0 1-.5-2.38c0-.9.16-1.69.5-2.37a3.87 3.87 0 0 1 3.62-2.16c.54 0 1.05.09 1.53.26s.9.44 1.27.8.66.81.87 1.37c.22.55.32 1.21.32 1.98v.63h-7.15v-1.4h5.18c0-.4-.09-.74-.25-1.05-.17-.3-.4-.55-.7-.73s-.64-.27-1.04-.27a2 2 0 0 0-1.1.3c-.32.2-.57.47-.75.8q-.255.495-.27 1.08v1.2c0 .52.1.95.28 1.31.19.36.45.64.78.83.33.2.72.29 1.17.29.3 0 .57-.04.81-.13.25-.08.46-.21.63-.38.18-.16.32-.37.4-.62l1.93.22a3 3 0 0 1-.7 1.33c-.33.37-.76.67-1.3.87-.52.2-1.12.31-1.8.31zM67.5 22.15a3.3 3.3 0 0 1-3.13-2.06 5.7 5.7 0 0 1-.47-2.44q0-1.455.48-2.46a3.34 3.34 0 0 1 4.39-1.77c.33.17.59.38.78.62.2.24.34.46.45.68h.08v-4.36h2.07V22h-2.03v-1.38H70c-.1.22-.26.44-.46.68a2.53 2.53 0 0 1-2.04.85m.57-1.68c.44 0 .8-.12 1.12-.36.3-.23.54-.57.7-1 .15-.41.23-.9.23-1.47s-.08-1.06-.24-1.48a2.1 2.1 0 0 0-.69-.97 1.8 1.8 0 0 0-1.12-.34c-.46 0-.84.12-1.15.35-.3.24-.53.57-.69 1-.15.41-.23.9-.23 1.44s.08 1.03.23 1.46c.16.42.4.76.7 1 .31.24.7.37 1.14.37M60.09 22v-8.73h2.05V22zm1.03-9.97a1.2 1.2 0 0 1-1.101-.677 1 1 0 0 1-.09-.433c0-.31.12-.57.35-.79q.36-.33.84-.33.495 0 .84.33a1.045 1.045 0 0 1 0 1.58c-.23.22-.5.32-.84.32M54.66 22.17a3.83 3.83 0 0 1-3.68-2.16 5.24 5.24 0 0 1-.5-2.34c0-.89.17-1.67.51-2.35s.82-1.2 1.44-1.59a4.16 4.16 0 0 1 2.22-.57c.7 0 1.33.13 1.88.4a3.21 3.21 0 0 1 1.87 2.74h-1.97a1.88 1.88 0 0 0-.56-1.06q-.45-.42-1.2-.42c-.41 0-.78.11-1.1.34-.32.22-.57.54-.74.96-.18.43-.27.93-.27 1.52 0 .6.1 1.1.27 1.53.17.42.41.75.73.98s.69.34 1.12.34c.3 0 .57-.05.81-.17.24-.11.45-.28.6-.5.17-.22.28-.49.34-.8h1.97a3.23 3.23 0 0 1-1.83 2.76 4.3 4.3 0 0 1-1.9.39zM46.68 18.33v-5.06h2.06V22h-2v-1.55h-.09c-.2.49-.52.89-.97 1.2-.45.3-1 .46-1.65.46a2.64 2.64 0 0 1-2.54-1.5 3.95 3.95 0 0 1-.37-1.78v-5.56h2.06v5.24c0 .55.15 1 .45 1.32.3.33.7.49 1.2.49a1.89 1.89 0 0 0 1.57-.88c.19-.3.28-.67.28-1.11M32.15 22V10.36h2.1v9.87h5.13V22z"/>
<path stroke="#1b1b1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 16a4 4 0 1 0-8 0 8 8 0 0 0 16 0c0-3.55-1.55-6.75-4-8.94"/>
<path stroke="#f56565" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 16a4 4 0 1 0 8 0 8 8 0 0 0-16 0c0 3.58 1.57 6.8 4.06 9"/>
<path fill="#ddd" d="M92 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/>
<path fill="#3178c6" d="M122 6h-20v20h20z"/>
<path fill="#fff" fill-rule="evenodd" d="M113.758 21.664v2.157q.526.267 1.242.406.751.14 1.516.133c.496.003.991-.047 1.476-.15a3.7 3.7 0 0 0 1.227-.49 2.54 2.54 0 0 0 .836-.893q.303-.55.304-1.358c0-.392-.054-.735-.172-1.032a2.5 2.5 0 0 0-.508-.789 3.7 3.7 0 0 0-.788-.616 9 9 0 0 0-1.04-.517 10 10 0 0 1-.765-.343 3.4 3.4 0 0 1-.57-.336 1.5 1.5 0 0 1-.367-.367.77.77 0 0 1-.125-.437q0-.223.117-.399c.077-.117.187-.219.32-.305.14-.086.312-.148.515-.195q.308-.07.672-.07c.18 0 .367.015.57.039.203.023.399.07.602.125q.303.082.594.21c.187.086.367.188.531.297V14.72a5.5 5.5 0 0 0-1.078-.282 8.5 8.5 0 0 0-1.336-.093q-.771 0-1.461.164a3.7 3.7 0 0 0-1.211.515 2.6 2.6 0 0 0-.828.892c-.203.358-.305.796-.305 1.296 0 .641.188 1.187.555 1.648q.563.678 1.687 1.157c.298.125.571.241.828.359.259.117.477.234.665.367.187.133.335.266.445.415s.164.32.164.508a.76.76 0 0 1-.101.39 1.1 1.1 0 0 1-.305.312 1.4 1.4 0 0 1-.516.204 3.3 3.3 0 0 1-.718.07 4.1 4.1 0 0 1-1.392-.25 4 4 0 0 1-1.28-.727m-3.594-5.375h2.773v-1.772h-7.734v1.773h2.758v7.914h2.195V16.29z" clip-rule="evenodd"/>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@@ -34,6 +34,11 @@
],
"destination": "/icons",
"permanent": false
},
{
"source": "/guide/packages/lucide-vue-next",
"destination": "/guide/packages/lucide-vue",
"permanent": false
}
],
"headers": [

View File

@@ -56,7 +56,6 @@
"account",
"animals",
"arrows",
"brands",
"buildings",
"charts",
"communication",
@@ -134,7 +133,7 @@
"$defs": {
"iconDeprecationReasons": {
"type": "string",
"enum": ["icon.brand"]
"enum": ["icon.renamed"]
},
"aliasDeprecationReasons": {
"type": "string",

View File

@@ -16,8 +16,6 @@
],
"categories": [
"multimedia",
"connectivity",
"devices",
"brands"
"connectivity"
]
}

View File

@@ -10,7 +10,6 @@
"payment"
],
"categories": [
"brands",
"development",
"finance"
]

View File

@@ -1,25 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"ericfennis"
],
"tags": [
"browser",
"logo"
],
"categories": [
"brands"
],
"aliases": [
{
"name": "chrome",
"deprecated": true,
"deprecationReason": "alias.name",
"toBeRemovedInVersion": "v1.0"
}
]
}

View File

@@ -1,17 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10.88 21.94 15.46 14" />
<path d="M21.17 8H12" />
<path d="M3.95 6.06 8.54 14" />
<circle cx="12" cy="12" r="10" />
<circle cx="12" cy="12" r="4" />
</svg>

Before

Width:  |  Height:  |  Size: 377 B

View File

@@ -1,17 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"ericfennis"
],
"tags": [
"logo"
],
"categories": [
"brands",
"development"
]
}

View File

@@ -1,17 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2" />
<line x1="12" x2="12" y1="22" y2="15.5" />
<polyline points="22 8.5 12 15.5 2 8.5" />
<polyline points="2 15.5 12 8.5 22 15.5" />
<line x1="12" x2="12" y1="2" y2="8.5" />
</svg>

Before

Width:  |  Height:  |  Size: 454 B

View File

@@ -1,18 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"csandman",
"ericfennis"
],
"tags": [
"logo"
],
"categories": [
"brands",
"development"
]
}

View File

@@ -1,18 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
<polyline points="7.5 4.21 12 6.81 16.5 4.21" />
<polyline points="7.5 19.79 7.5 14.6 3 12" />
<polyline points="21 12 16.5 14.6 16.5 19.79" />
<polyline points="3.27 6.96 12 12.01 20.73 6.96" />
<line x1="12" x2="12" y1="22.08" y2="12" />
</svg>

Before

Width:  |  Height:  |  Size: 595 B

View File

@@ -1,18 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"ahtohbi4"
],
"tags": [
"design",
"social"
],
"categories": [
"brands",
"social",
"design"
]
}

View File

@@ -1,16 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94" />
<path d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32" />
<path d="M8.56 2.75c4.37 6 6 9.42 8 17.72" />
</svg>

Before

Width:  |  Height:  |  Size: 408 B

View File

@@ -1,19 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"csandman",
"ericfennis"
],
"tags": [
"logo",
"social"
],
"categories": [
"social",
"brands"
]
}

View File

@@ -1,13 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
</svg>

Before

Width:  |  Height:  |  Size: 289 B

View File

@@ -1,21 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"csandman",
"mittalyashu",
"ericfennis"
],
"tags": [
"logo",
"design",
"tool"
],
"categories": [
"brands",
"design"
]
}

View File

@@ -1,17 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
<path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
</svg>

Before

Width:  |  Height:  |  Size: 534 B

View File

@@ -1,21 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"csandman",
"mittalyashu",
"ericfennis"
],
"tags": [
"logo",
"design",
"tool"
],
"categories": [
"brands",
"design"
]
}

View File

@@ -1,13 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 16V9h14V2H5l14 14h-7m-7 0 7 7v-7m-7 0h7" />
</svg>

Before

Width:  |  Height:  |  Size: 266 B

View File

@@ -1,20 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"csandman",
"ericfennis",
"karsa-mistmere"
],
"tags": [
"logo",
"version control"
],
"categories": [
"brands",
"development"
]
}

View File

@@ -1,14 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
<path d="M9 18c-4.51 2-5-2-7-2" />
</svg>

Before

Width:  |  Height:  |  Size: 509 B

View File

@@ -1,20 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"csandman",
"ericfennis",
"karsa-mistmere"
],
"tags": [
"logo",
"version control"
],
"categories": [
"brands",
"development"
]
}

View File

@@ -1,13 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m22 13.29-3.33-10a.42.42 0 0 0-.14-.18.38.38 0 0 0-.22-.11.39.39 0 0 0-.23.07.42.42 0 0 0-.14.18l-2.26 6.67H8.32L6.1 3.26a.42.42 0 0 0-.1-.18.38.38 0 0 0-.26-.08.39.39 0 0 0-.23.07.42.42 0 0 0-.14.18L2 13.29a.74.74 0 0 0 .27.83L12 21l9.69-6.88a.71.71 0 0 0 .31-.83Z" />
</svg>

Before

Width:  |  Height:  |  Size: 489 B

View File

@@ -12,7 +12,6 @@
],
"categories": [
"shapes",
"brands",
"development"
]
}

View File

@@ -1,21 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"csandman",
"ericfennis"
],
"tags": [
"logo",
"camera",
"social"
],
"categories": [
"brands",
"social",
"photography"
]
}

View File

@@ -1,15 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
</svg>

Before

Width:  |  Height:  |  Size: 381 B

View File

@@ -1,20 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"okcoker",
"csandman",
"ericfennis"
],
"tags": [
"logo",
"social media",
"social"
],
"categories": [
"social",
"brands"
]
}

View File

@@ -1,15 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
<rect width="4" height="12" x="2" y="9" />
<circle cx="4" cy="4" r="2" />
</svg>

Before

Width:  |  Height:  |  Size: 380 B

View File

@@ -1,18 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"csandman",
"ericfennis"
],
"tags": [
"logo",
"save"
],
"categories": [
"brands"
]
}

View File

@@ -1,14 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 3a2 2 0 0 1 2 2v6a1 1 0 0 1-20 0V5a2 2 0 0 1 2-2z" />
<path d="m8 10 4 4 4-4" />
</svg>

Before

Width:  |  Height:  |  Size: 306 B

View File

@@ -1,19 +0,0 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"danielbayley"
],
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"tags": [
"railway",
"train",
"track",
"line"
],
"categories": [
"transportation",
"navigation"
]
}

View File

@@ -1,15 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 15h14" />
<path d="M5 9h14" />
<path d="m14 20-5-5 6-6-5-5" />
</svg>

Before

Width:  |  Height:  |  Size: 289 B

View File

@@ -1,22 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"ashygee",
"wojtekmaj",
"mittalyashu",
"ericfennis"
],
"tags": [
"logo"
],
"categories": [
"account",
"social",
"brands",
"development"
]
}

View File

@@ -1,20 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="3" height="8" x="13" y="2" rx="1.5" />
<path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5" />
<rect width="3" height="8" x="8" y="14" rx="1.5" />
<path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5" />
<rect width="8" height="3" x="14" y="13" rx="1.5" />
<path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5" />
<rect width="8" height="3" x="2" y="8" rx="1.5" />
<path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5" />
</svg>

Before

Width:  |  Height:  |  Size: 628 B

View File

@@ -13,7 +13,6 @@
"productivity"
],
"categories": [
"brands",
"gaming"
]
}

View File

@@ -1,21 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"bdbch",
"csandman",
"mittalyashu",
"ericfennis"
],
"tags": [
"logo",
"brand"
],
"categories": [
"account",
"brands",
"development"
]
}

View File

@@ -1,15 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
<rect width="3" height="9" x="7" y="7" />
<rect width="3" height="5" x="14" y="7" />
</svg>

Before

Width:  |  Height:  |  Size: 357 B

View File

@@ -1,20 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"ahtohbi4",
"johnletey"
],
"tags": [
"logo",
"social"
],
"categories": [
"brands",
"social",
"account",
"gaming"
]
}

View File

@@ -1,13 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7" />
</svg>

Before

Width:  |  Height:  |  Size: 265 B

View File

@@ -1,21 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"csandman",
"ericfennis",
"karsa-mistmere"
],
"tags": [
"logo",
"social"
],
"categories": [
"brands",
"social",
"account"
]
}

View File

@@ -1,13 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
</svg>

Before

Width:  |  Height:  |  Size: 359 B

View File

@@ -1,24 +0,0 @@
{
"$schema": "../icon.schema.json",
"deprecated": true,
"deprecationReason": "icon.brand",
"toBeRemovedInVersion": "v1.0",
"contributors": [
"colebemis",
"csandman",
"ericfennis",
"karsa-mistmere",
"jguddas"
],
"tags": [
"logo",
"social",
"video",
"play"
],
"categories": [
"multimedia",
"social",
"brands"
]
}

View File

@@ -1,14 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
<path d="m10 15 5-3-5-3z" />
</svg>

Before

Width:  |  Height:  |  Size: 428 B

10
packages/icons/.npmignore Normal file
View File

@@ -0,0 +1,10 @@
stats
node_modules
tests
scripts
build
src
babel.config.js
jest.config.js
rollup.config.js
yarn.error.log

82
packages/icons/README.md Normal file
View File

@@ -0,0 +1,82 @@
<p align="center">
<a href="https://github.com/lucide-icons/lucide">
<img src="https://lucide.dev/package-logos/icons.svg" alt="" width="540">
</a>
</p>
<p align="center">
Lucide helper library that exports icon data.
</p>
<div align="center">
[![npm](https://img.shields.io/npm/v/@lucide/icons?color=blue)](https://www.npmjs.com/package/@lucide/icons)
![NPM Downloads](https://img.shields.io/npm/dw/@lucide/icons)
[![GitHub](https://img.shields.io/github/license/lucide-icons/lucide)](https://lucide.dev/license)
</div>
<p align="center">
<a href="https://lucide.dev/guide/">About</a>
·
<a href="https://lucide.dev/icons/">Icons</a>
·
<a href="https://lucide.dev/guide/packages/lucide">Documentation</a>
·
<a href="https://lucide.dev/license">License</a>
</p>
# @lucide/icons
A helper library that exports Lucide icon data in a tree-shakable format, also providing utilities for dynamic importing icons.
## Installation
```sh
pnpm add @lucide/icons
```
```sh
npm install @lucide/icons
```
```sh
yarn add @lucide/icons
```
```sh
bun add @lucide/icons
```
### CDN
```html
<!-- Development version -->
<script src="https://unpkg.com/@lucide/icons@latest/dist/umd/lucide.js"></script>
<!-- Production version -->
<script src="https://unpkg.com/@lucide/icons@latest"></script>
```
## Documentation
For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/icons)
## Community
Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users.
## License
Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/license).
## Sponsors
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
<img src="https://lucide.dev/vercel.svg" alt="Powered by Vercel" width="200" />
</a>
<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="https://lucide.dev/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
### Awesome backers 🍺
<a href="https://www.scipress.io?utm_source=lucide"><img src="https://lucide.dev/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>
<a href="https://github.com/pdfme/pdfme"><img src="../../docs/public/sponsors/pdfme.svg" width="180" alt="pdfme sponsor badge" /></a>

View File

@@ -0,0 +1,77 @@
{
"name": "@lucide/icons",
"description": "A Lucide icon library that contains icon data in a standard Lucide format.",
"version": "0.0.1",
"license": "ISC",
"homepage": "https://lucide.dev",
"bugs": "https://github.com/lucide-icons/lucide/issues",
"repository": {
"type": "git",
"url": "https://github.com/lucide-icons/lucide.git",
"directory": "packages/lucide"
},
"keywords": [
"Lucide",
"HTML",
"Feather",
"Icons",
"Icon",
"SVG",
"Feather Icons"
],
"amdName": "lucide-icons",
"source": "src/lucide-icons.ts",
"main": "dist/cjs/lucide-icons.cjs",
"module": "dist/esm/lucide-icons.mjs",
"types": "dist/esm/lucide-icons.d.ts",
"sideEffects": false,
"exports": {
".": {
"types": "./dist/esm/lucide-icons.d.ts",
"import": "./dist/esm/lucide-icons.mjs",
"require": "./dist/cjs/lucide-icons.cjs",
"default": "./dist/esm/lucide-icons.mjs"
},
"./icons/*": {
"import": "./dist/esm/icons/*.mjs",
"default": "./dist/esm/icons/*.mjs"
},
"./dynamic": {
"types": "./dist/esm/dynamic.d.ts",
"import": "./dist/esm/dynamic.mjs",
"require": "./dist/cjs/dynamic.cjs",
"default": "./dist/esm/dynamic.mjs"
},
"./build": {
"types": "./dist/esm/build.d.ts",
"import": "./dist/esm/build.mjs",
"require": "./dist/cjs/build.cjs",
"default": "./dist/esm/build.mjs"
}
},
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundle",
"copy:license": "cp ../../LICENSE ./LICENSE",
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts",
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --withDynamicImports --separateAliasesFile --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
"build:bundle": "rollup -c rollup.config.mjs",
"test": "pnpm build:icons && vitest run",
"test:watch": "vitest watch",
"test:update": "vitest -u",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@lucide/build-icons": "workspace:*",
"@lucide/helpers": "^1.0.0",
"@lucide/rollup-plugins": "workspace:*",
"@rollup/plugin-replace": "^6.0.2",
"@testing-library/jest-dom": "^6.6.3",
"jest-serializer-html": "^7.1.0",
"rollup": "^4.53.3",
"rollup-plugin-dts": "^6.2.3",
"rollup-plugin-preserve-directives": "^0.4.0",
"typescript": "^5.8.3",
"vite": "^7.2.4",
"vitest": "^4.0.12"
}
}

View File

@@ -0,0 +1,87 @@
import plugins from '@lucide/rollup-plugins';
import pkg from './package.json' with { type: 'json' };
import dts from 'rollup-plugin-dts';
const packageName = '@lucide/icons';
const outputFileName = 'lucide-icons';
const inputs = [`src/lucide-icons.ts`];
const bundles = [
{
format: 'cjs',
inputs,
extension: 'cjs',
},
{
format: 'esm',
inputs: [...inputs, './src/dynamic.ts', './src/build.ts'],
preserveModules: true,
extension: 'mjs',
},
];
const configs = bundles
.map(
({
inputs,
outputDir = 'dist',
outputFile,
format,
minify,
preserveModules,
entryFileNames,
external = [],
paths,
extension = 'js',
}) =>
inputs.map((input) => ({
input,
plugins: [...plugins({ pkg, minify })],
external,
output: {
name: packageName,
entryFileNames,
...(preserveModules
? {
dir: `${outputDir}/${format}`,
entryFileNames: `[name].${extension}`,
}
: {
file:
outputFile ??
`${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.${extension}`,
}),
paths,
format,
sourcemap: true,
preserveModules,
exports: 'named',
globals: {},
preserveModulesRoot: 'src',
},
})),
)
.flat();
export default [
...[
outputFileName,
`${outputFileName}.prefixed`,
`${outputFileName}.suffixed`,
'dynamic',
'build',
].map((filename) => ({
input: `./src/${filename}.ts`,
output: [
{
file: `dist/esm/${filename}.d.ts`,
format: 'esm',
},
{
file: `dist/cjs/${filename}.d.cts`,
format: 'cjs',
},
],
plugins: [dts()],
})),
...configs,
];

View File

@@ -0,0 +1,36 @@
/* eslint-disable import/no-extraneous-dependencies */
import base64SVG from '@lucide/build-icons/utils/base64SVG';
export default async ({
componentName,
iconName,
children,
getSvg,
deprecated,
deprecationReason,
}) => {
const svgContents = await getSvg();
const svgBase64 = base64SVG(svgContents);
return `
import type { LucideIcon } from '../types';
/**
* @name ${iconName}
* @description Lucide SVG icon node.
*
* @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
* @see https://lucide.dev/guide/packages/lucide - Documentation
*
* @returns {Array}
* ${deprecated ? `@deprecated ${deprecationReason}` : ''}
*/
const ${componentName}: LucideIcon = ${JSON.stringify({
name: iconName,
size: 24,
node: children,
})}
export default ${componentName};
`;
};

View File

@@ -0,0 +1,3 @@
export * from './aliases';
export * from './prefixed';
export * from './suffixed';

View File

@@ -0,0 +1,4 @@
export { default as buildLucideIconNode } from './buildLucideIconNode';
export { default as buildLucideDataUri } from './buildLucideDataUri';
export { default as buildLucideIconElement } from './buildLucideIconElement';
export { default as buildLucideSvg } from './buildLucideSvg';

View File

@@ -0,0 +1,30 @@
import { LucideBuildParams, LucideIcon } from './types';
import buildLucideSvg from './buildLucideSvg';
/**
* Creates a base64 encoded data URI from a Lucide icon object.
*
* @param icon The icon to build.
* @param params Additional build parameters.
*/
function buildLucideDataUri(icon: LucideIcon, params: LucideBuildParams = {}) {
const svg = buildLucideSvg(icon, params);
// Browser
if (typeof btoa === 'function') {
// Ensure proper UTF-8 handling before base64
const utf8Bytes = new TextEncoder().encode(svg);
let binary = '';
for (const element of utf8Bytes) binary += String.fromCodePoint(element);
return `data:image/svg+xml;base64,${btoa(binary)}`;
}
// Node.js (and other JS runtimes with Buffer)
if (typeof Buffer !== 'undefined') {
return `data:image/svg+xml;base64,${Buffer.from(svg, 'utf8').toString('base64')}`;
}
throw new Error('No base64 encoder available in this environment.');
}
export default buildLucideDataUri;

View File

@@ -0,0 +1,34 @@
import { LucideBuildParams, LucideIcon, LucideIconNode } from './types';
import buildLucideIconNode from './buildLucideIconNode';
const buildDomElement = (
document: Document,
[tagName, attributes, children = []]: LucideIconNode,
): Element => {
const element = document.createElementNS('http://www.w3.org/2000/svg', tagName);
for (const [attrName, value] of Object.entries(attributes)) {
element.setAttribute(attrName, value);
}
for (const node of children) {
const childNode = buildDomElement(document, node);
element.appendChild(childNode);
}
return element;
};
/**
* Creates an SvgElement from a Lucide icon object.
*
* @param document The document to create the Element in.
* @param icon The icon to build.
* @param params Additional build parameters.
*/
function buildLucideIconElement(
document: Document,
icon: LucideIcon,
params: LucideBuildParams = {},
) {
return buildDomElement(document, buildLucideIconNode(icon, params));
}
export default buildLucideIconElement;

View File

@@ -0,0 +1,50 @@
import { LucideBuildParams, LucideIcon, LucideIconNode } from './types';
const defaultAttributes = {
xmlns: 'http://www.w3.org/2000/svg',
width: '24',
height: '24',
viewBox: '0 0 24 24',
fill: 'none',
stroke: 'currentColor',
'stroke-width': '2',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
};
/**
* Creates a Lucide icon node (an svgson-like format) from a Lucide icon object.
*
* @param icon The icon to build.
* @param params Additional build parameters.
*/
function buildLucideIconNode(icon: LucideIcon, params: LucideBuildParams = {}): LucideIconNode {
const viewBoxWidth = ('size' in icon ? icon.size : icon.width) ?? defaultAttributes.width;
const viewBoxHeight = ('size' in icon ? icon.size : icon.height) ?? defaultAttributes.height;
const attributes = {
...defaultAttributes,
...('color' in params && { stroke: params['color'] }),
...('size' in params &&
params['size'] && {
width: params['size'].toString(10),
height: params['size'].toString(10),
}),
...('width' in params && params['width'] && { width: params['width'].toString(10) }),
...('height' in params && params['height'] && { height: params['height'].toString(10) }),
...('strokeWidth' in params &&
params['strokeWidth'] && { 'stroke-width': params['strokeWidth'].toString(10) }),
class: `lucide lucide-${icon.name} ${params['className'] ?? ''}`.trim(),
viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
...('attributes' in params && params.attributes),
};
return [
'svg',
attributes,
icon.node.map(([name, attrs]) => [
name,
params['absoluteStrokeWidth'] ? { 'vector-effect': 'non-scaling-stroke', ...attrs } : attrs,
]),
];
}
export default buildLucideIconNode;

View File

@@ -0,0 +1,19 @@
import { LucideBuildParams, LucideIcon, LucideIconNode } from './types';
import buildLucideIconNode from './buildLucideIconNode';
const buildDomNode = ([tagName, attributes, children = []]: LucideIconNode): string =>
`<${tagName} ${Object.entries(attributes)
.map(([attrName, value]) => `${attrName}="${value}"`)
.join(' ')}>${children?.map((child) => buildDomNode(child)).join('')}</${tagName}>`;
/**
* Creates an SVG string from a Lucide icon object.
*
* @param icon The icon to build.
* @param params Additional build parameters.
*/
function buildLucideSvg(icon: LucideIcon, params: LucideBuildParams = {}) {
return buildDomNode(buildLucideIconNode(icon, params));
}
export default buildLucideSvg;

View File

@@ -0,0 +1,2 @@
export { lucideIconNames, type LucideIconName } from './dynamicIcon';
export { default as lucideDynamicIconImports } from './dynamicIconImports';

View File

@@ -0,0 +1,8 @@
import dynamicIconImports from './dynamicIconImports';
export type LucideIconName = keyof typeof dynamicIconImports;
/**
* The list of available Lucide icon names.
*/
export const lucideIconNames = Object.keys(dynamicIconImports) as Array<LucideIconName>;

View File

@@ -0,0 +1,5 @@
export * as icons from './icons';
export * from './aliases/prefixed';
export * from './types';
export * from './build';

View File

@@ -0,0 +1,3 @@
export * as icons from './icons';
export * from './aliases/suffixed';
export * from './types';

View File

@@ -1,3 +1,4 @@
export * from './icons';
export * as icons from './icons';
export * from './aliases';
export * from './icons';
export * from './aliases/index';
export * from './types';

View File

@@ -0,0 +1,42 @@
export type SVGProps = Record<string, string>;
/**
* A Lucide icon node (an svgson-like internal format)
*/
export type LucideIconNode =
| [attrName: string, attributes: SVGProps]
| [attrName: string, attributes: SVGProps, children: LucideIconNode[]];
/**
* A Lucide icon object that fully describes an icon to be displayed.
*/
export type LucideIcon = {
name: string;
node: LucideIconNode[];
} & ({ size: number } | { width: number; height: number });
/**
* Build parameters for creating a Lucide icon instance for display.
*/
export type LucideBuildParams = {
/**
* The color of the icon.
*/
color?: string;
/**
* The stroke width.
*/
strokeWidth?: number;
/**
* Adds [`vector-effect="non-scaling-stroke"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/vector-effect) to child elements.
*/
absoluteStrokeWidth?: boolean;
/**
* Extra CSS class names to pass to the SVG element.
*/
className?: string;
/**
* Any extra attributes to pass to the SVG element.
*/
attributes?: SVGProps;
} & ({ size?: number } | { width?: number; height?: number });

View File

@@ -0,0 +1,24 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`buildLucideIconElement > should match the snapshot 1`] = `
<svg xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-house"
>
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
key="5wwlr5"
>
</path>
<path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
key="r6nss1"
>
</path>
</svg>
`;

View File

@@ -0,0 +1,3 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`buildLucideIconNode > should match the snapshot 1`] = `"{"xmlns":"http://www.w3.org/2000/svg","width":"24","height":"24","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","class":"lucide lucide-house"}"`;

View File

@@ -0,0 +1,26 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`buildLucideSvg > should match the snapshot 1`] = `
<svg xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-house"
>
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
key="5wwlr5"
>
</path>
<path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
key="r6nss1"
>
</path>
</svg>
`;
exports[`buildLucideSvgDataUri > should match the snapshot 1`] = `"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWhvdXNlIj48cGF0aCBkPSJNMTUgMjF2LThhMSAxIDAgMCAwLTEtMWgtNGExIDEgMCAwIDAtMSAxdjgiIGtleT0iNXd3bHI1Ij48L3BhdGg+PHBhdGggZD0iTTMgMTBhMiAyIDAgMCAxIC43MDktMS41MjhsNy02YTIgMiAwIDAgMSAyLjU4MiAwbDcgNkEyIDIgMCAwIDEgMjEgMTB2OWEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMnoiIGtleT0icjZuc3MxIj48L3BhdGg+PC9zdmc+"`;

View File

@@ -0,0 +1,44 @@
import { describe, expect, it } from 'vitest';
import { House } from '../src/lucide-icons';
import { getOriginalSvg, removeKeys } from './helpers';
import buildLucideIconElement from '../src/buildLucideIconElement';
describe('buildLucideIconElement', () => {
it('should create SVG Element', () => {
const HomeSVG = buildLucideIconElement(document, House);
expect(HomeSVG.tagName).toBe('svg');
});
it('should match the snapshot', () => {
const HomeSVG = buildLucideIconElement(document, House);
expect(HomeSVG.outerHTML).toMatchSnapshot();
});
it('should create SVG Element with attributes', () => {
const HomeSVG = buildLucideIconElement(document, House, { attributes: { fill: 'red' } });
expect(HomeSVG.getAttribute('fill')).toBe('red');
});
it('should create SVG Element with class name', () => {
const HomeSVG = buildLucideIconElement(document, House, { attributes: { class: 'icon' } });
expect(HomeSVG.getAttribute('class')).toBe('icon');
});
it('should merge classes', () => {
const HomeSVG = buildLucideIconElement(document, House, { className: 'icon' });
expect(HomeSVG.getAttribute('class')).toBe('lucide lucide-house icon');
});
it('should create the correct svg element', () => {
const HomeSVG = buildLucideIconElement(document, House);
const svg = getOriginalSvg('house', undefined, true);
expect(removeKeys(HomeSVG.outerHTML)).toBe(svg);
});
});

View File

@@ -0,0 +1,86 @@
import { describe, expect, it } from 'vitest';
import { House } from '../src/lucide-icons';
import buildLucideIconNode from '../src/buildLucideIconNode';
describe('buildLucideIconNode', () => {
it('should create icon node', () => {
const HouseSVG = buildLucideIconNode(House);
expect(HouseSVG.at(0)).toBe('svg');
});
it('should match the snapshot', () => {
const HouseSVG = buildLucideIconNode(House);
expect(JSON.stringify(HouseSVG.at(1))).toMatchSnapshot();
});
it('should override dimensions, but not viewBox', () => {
const HouseSVG = buildLucideIconNode(House, { size: 12 });
expect(HouseSVG[1]['width']).toBe('12');
expect(HouseSVG[1]['height']).toBe('12');
expect(HouseSVG[1]['viewBox']).toBe('0 0 24 24');
});
it('should override width, but not height', () => {
const HouseSVG = buildLucideIconNode(House, { width: 12 });
expect(HouseSVG[1]['width']).toBe('12');
expect(HouseSVG[1]['height']).toBe('24');
expect(HouseSVG[1]['viewBox']).toBe('0 0 24 24');
});
it('should override height, but not width', () => {
const HouseSVG = buildLucideIconNode(House, { height: 12 });
expect(HouseSVG[1]['width']).toBe('24');
expect(HouseSVG[1]['height']).toBe('12');
expect(HouseSVG[1]['viewBox']).toBe('0 0 24 24');
});
it('should override color', () => {
const HouseSVG = buildLucideIconNode(House, { color: 'pink' });
expect(HouseSVG[1]['stroke']).toBe('pink');
expect(HouseSVG[1]['fill']).toBe('none');
});
it('should override stroke width', () => {
const HouseSVG = buildLucideIconNode(House, { strokeWidth: 12 });
expect(HouseSVG[1]['stroke-width']).toBe('12');
});
it('should set non-scaling-stroke to child nodes', () => {
const HouseSVG = buildLucideIconNode(House, { absoluteStrokeWidth: true });
for (const node of HouseSVG[2]!) {
expect(node[1]['vector-effect']).toBe('non-scaling-stroke');
}
});
it('should not set non-scaling-stroke', () => {
const HouseSVG = buildLucideIconNode(House, { absoluteStrokeWidth: false });
expect(HouseSVG[1]['vector-effect']).toBeUndefined();
});
it('should create icon node with attributes', () => {
const HouseSVG = buildLucideIconNode(House, { attributes: { fill: 'red' } });
expect(HouseSVG[1]['fill']).toBe('red');
});
it('should create icon node with class name', () => {
const HouseSVG = buildLucideIconNode(House, { attributes: { class: 'icon' } });
expect(HouseSVG[1]['class']).toBe('icon');
});
it('should merge classes', () => {
const HouseSVG = buildLucideIconNode(House, { className: 'icon' });
expect(HouseSVG[1]['class']).toBe('lucide lucide-house icon');
});
});

View File

@@ -0,0 +1,29 @@
import { describe, expect, it } from 'vitest';
import { House } from '../src/lucide-icons';
import { getOriginalSvg, removeKeys } from './helpers';
import buildLucideSvg from '../src/buildLucideSvg';
import buildLucideDataUri from '../src/buildLucideDataUri';
describe('buildLucideSvg', () => {
it('should match the snapshot', () => {
const HouseSVG = buildLucideSvg(House);
expect(HouseSVG).toMatchSnapshot();
});
it('should create the correct svg element', () => {
const HouseSVG = buildLucideSvg(House);
const svg = getOriginalSvg('house', undefined, true);
expect(removeKeys(HouseSVG)).toBe(svg);
});
});
describe('buildLucideSvgDataUri', () => {
it('should match the snapshot', () => {
const HouseDataUri = buildLucideDataUri(House);
expect(HouseDataUri).toMatchSnapshot();
});
});

View File

@@ -0,0 +1,18 @@
import fs from 'fs';
import path from 'path';
import { parseSync, stringify } from 'svgson';
const ICONS_DIR = path.resolve(__dirname, '../../../icons');
export const getOriginalSvg = (iconName: string, aliasName?: string, setAttrs = true) => {
const svgContent = fs.readFileSync(path.join(ICONS_DIR, `${iconName}.svg`), 'utf8');
const svgParsed = parseSync(svgContent);
if (setAttrs) {
svgParsed.attributes['class'] = `lucide lucide-${aliasName ?? iconName}`;
}
return stringify(svgParsed, { selfClose: false });
};
export const removeKeys = (svg: string) => svg.replaceAll(/ key="[^"]+"/g, '');

View File

@@ -0,0 +1,10 @@
import { describe, expect, it } from 'vitest';
import { House } from '../src/lucide-icons';
describe('lucide-icons', () => {
it('should init', () => {
const HouseSVG = House;
expect(House).toMatchObject(House);
});
});

View File

@@ -0,0 +1,5 @@
import { expect } from 'vitest';
import '@testing-library/jest-dom/vitest';
import htmlSerializer from 'jest-serializer-html';
expect.addSnapshotSerializer(htmlSerializer);

View File

@@ -0,0 +1,22 @@
{
"compilerOptions": {
"strict": true,
"declaration": false,
"noEmitOnError": true,
"noEmit": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"module": "ESNext",
"target": "ESNext",
"esModuleInterop": true,
"isolatedModules": true,
"lib": ["esnext", "dom"],
"skipLibCheck": true,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"downlevelIteration": true,
"sourceMap": true,
"outDir": "./dist",
},
"exclude": ["**/node_modules"],
}

View File

@@ -0,0 +1,9 @@
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: {
globals: true,
environment: 'jsdom',
setupFiles: './tests/setupVitest.js',
}
});

View File

@@ -24,9 +24,7 @@
"author": "Eric Fennis",
"amdName": "lucide-preact",
"main": "dist/cjs/lucide-preact.js",
"main:umd": "dist/umd/lucide-preact.js",
"module": "dist/esm/lucide-preact.js",
"unpkg": "dist/umd/lucide-preact.min.js",
"typings": "dist/lucide-preact.d.ts",
"files": [
"dist"
@@ -46,7 +44,7 @@
"@lucide/rollup-plugins": "workspace:*",
"@lucide/shared": "workspace:*",
"@preact/preset-vite": "^2.10.2",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/preact": "^3.2.3",
"jest-serializer-html": "^7.1.0",
"preact": "^10.19.2",

View File

@@ -7,17 +7,6 @@ const outputFileName = 'lucide-preact';
const outputDir = 'dist';
const inputs = [`src/lucide-preact.ts`];
const bundles = [
{
format: 'umd',
inputs,
outputDir,
minify: true,
},
{
format: 'umd',
inputs,
outputDir,
},
{
format: 'cjs',
inputs,
@@ -32,7 +21,7 @@ const bundles = [
];
const configs = bundles
.map(({ inputs, outputDir, format, minify, preserveModules }) =>
.map(({ inputs, outputDir, format, preserveModules }) =>
inputs.map((input) => ({
input,
plugins: plugins({ pkg, minify }),
@@ -44,7 +33,7 @@ const configs = bundles
dir: `${outputDir}/${format}`,
}
: {
file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
file: `${outputDir}/${format}/${outputFileName}.js`,
}),
preserveModules,
format,

View File

@@ -58,7 +58,7 @@
"@lucide/rollup-plugins": "workspace:*",
"@lucide/build-icons": "workspace:*",
"@lucide/shared": "workspace:*",
"@testing-library/jest-dom": "^6.1.6",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^14.1.2",
"@types/prop-types": "^15.7.5",
"@types/react": "^18.0.21",

View File

@@ -22,10 +22,10 @@ const bundles = [
];
const configs = bundles
.map(({ inputs, outputDir, format, minify, preserveModules }) =>
.map(({ inputs, outputDir, format, preserveModules }) =>
inputs.map((input) => ({
input,
plugins: plugins({ pkg, minify }),
plugins: plugins({ pkg }),
external: ['react', 'react-native-svg'],
output: {
name: packageName,
@@ -35,7 +35,7 @@ const configs = bundles
exports: 'auto',
}
: {
file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
file: `${outputDir}/${format}/${outputFileName}.js`,
}),
format,
preserveModules,

View File

@@ -24,9 +24,7 @@
"author": "Eric Fennis",
"amdName": "lucide-react",
"main": "dist/cjs/lucide-react.js",
"main:umd": "dist/umd/lucide-react.js",
"module": "dist/esm/lucide-react.js",
"unpkg": "dist/umd/lucide-react.min.js",
"typings": "dist/lucide-react.d.ts",
"sideEffects": false,
"files": [
@@ -54,7 +52,7 @@
"@lucide/build-icons": "workspace:*",
"@lucide/rollup-plugins": "workspace:*",
"@lucide/shared": "workspace:*",
"@testing-library/jest-dom": "^6.1.6",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^14.1.2",
"@types/react": "^18.2.37",
"@vitejs/plugin-react": "^4.4.1",

View File

@@ -10,17 +10,6 @@ const packageName = 'LucideReact';
const outputFileName = 'lucide-react';
const inputs = [`src/lucide-react.ts`];
const bundles = [
{
format: 'umd',
inputs,
outputDir: 'dist/umd',
minify: true,
},
{
format: 'umd',
inputs,
outputDir: 'dist/umd',
},
{
format: 'cjs',
inputs,
@@ -78,7 +67,7 @@ const configs = bundles
dir: outputDir,
}
: {
file: outputFile ?? `${outputDir}/${outputFileName}${minify ? '.min' : ''}.js`,
file: outputFile ?? `${outputDir}/${outputFileName}.js`,
}),
paths,
entryFileNames,

Some files were not shown because too many files have changed in this diff Show More