Compare commits
26 Commits
fix-stable
...
package/ic
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2bb9c9e059 | ||
|
|
3b0c39cf13 | ||
|
|
76861c621f | ||
|
|
4869c6409a | ||
|
|
5fab4e7bc8 | ||
|
|
d391bda369 | ||
|
|
eae3dc5f94 | ||
|
|
00954a6203 | ||
|
|
d152818621 | ||
|
|
abff584694 | ||
|
|
5d8110882d | ||
|
|
2ea256381c | ||
|
|
b88bcae614 | ||
|
|
1bbcaf8c1c | ||
|
|
68ea9b2736 | ||
|
|
620b478a2e | ||
|
|
6c3bd53c35 | ||
|
|
881e733159 | ||
|
|
d58a2e43c6 | ||
|
|
5ecf78bb8a | ||
|
|
aa8f74eb9e | ||
|
|
7327637532 | ||
|
|
08bd4b33a0 | ||
|
|
b1675c4c33 | ||
|
|
758fa4b75f | ||
|
|
7bbb1e1fea |
@@ -9,9 +9,3 @@ strikethrough
|
||||
touchpad
|
||||
ungroup
|
||||
toc
|
||||
|
||||
# Brands
|
||||
codepen
|
||||
codesandbox
|
||||
dribbble
|
||||
x.com
|
||||
|
||||
1
.github/ISSUE_TEMPLATE/02_bug_report.yml
vendored
@@ -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
|
||||
|
||||
@@ -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
@@ -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
@@ -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
@@ -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
|
||||
2
.github/workflows/release.yml
vendored
@@ -60,6 +60,8 @@ jobs:
|
||||
'lucide-svelte',
|
||||
'@lucide/astro',
|
||||
'@lucide/svelte',
|
||||
'@lucide/icons',
|
||||
'@lucide/vue',
|
||||
]
|
||||
steps:
|
||||
- uses: actions/checkout@v6
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
"adobe": "Adobe",
|
||||
"airplay": "AirPlay",
|
||||
"amazon": "Amazon",
|
||||
"android": "Android",
|
||||
"angular": "Angular",
|
||||
"aws": "AWS",
|
||||
"azure": "Azure",
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Brands",
|
||||
"icon": "facebook"
|
||||
}
|
||||
@@ -15,10 +15,6 @@
|
||||
"name": "arrows",
|
||||
"title": "Arrows"
|
||||
},
|
||||
{
|
||||
"name": "brands",
|
||||
"title": "Brands"
|
||||
},
|
||||
{
|
||||
"name": "buildings",
|
||||
"title": "Buildings"
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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).
|
||||
|
||||
|
||||
172
docs/guide/packages/icons.md
Normal 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)
|
||||
}
|
||||
```
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
```
|
||||
@@ -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>
|
||||
|
||||
4
docs/public/framework-logos/ts.svg
Normal 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 |
9
docs/public/package-logos/icons.svg
Normal 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 |
@@ -34,6 +34,11 @@
|
||||
],
|
||||
"destination": "/icons",
|
||||
"permanent": false
|
||||
},
|
||||
{
|
||||
"source": "/guide/packages/lucide-vue-next",
|
||||
"destination": "/guide/packages/lucide-vue",
|
||||
"permanent": false
|
||||
}
|
||||
],
|
||||
"headers": [
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -16,8 +16,6 @@
|
||||
],
|
||||
"categories": [
|
||||
"multimedia",
|
||||
"connectivity",
|
||||
"devices",
|
||||
"brands"
|
||||
"connectivity"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
"payment"
|
||||
],
|
||||
"categories": [
|
||||
"brands",
|
||||
"development",
|
||||
"finance"
|
||||
]
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"deprecated": true,
|
||||
"deprecationReason": "icon.brand",
|
||||
"toBeRemovedInVersion": "v1.0",
|
||||
"contributors": [
|
||||
"colebemis",
|
||||
"ericfennis"
|
||||
],
|
||||
"tags": [
|
||||
"logo"
|
||||
],
|
||||
"categories": [
|
||||
"brands",
|
||||
"development"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -12,7 +12,6 @@
|
||||
],
|
||||
"categories": [
|
||||
"shapes",
|
||||
"brands",
|
||||
"development"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -13,7 +13,6 @@
|
||||
"productivity"
|
||||
],
|
||||
"categories": [
|
||||
"brands",
|
||||
"gaming"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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 |
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -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
@@ -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
@@ -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">
|
||||
[](https://www.npmjs.com/package/@lucide/icons)
|
||||

|
||||
[](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>
|
||||
77
packages/icons/package.json
Normal 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"
|
||||
}
|
||||
}
|
||||
87
packages/icons/rollup.config.mjs
Normal 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,
|
||||
];
|
||||
36
packages/icons/scripts/exportTemplate.mjs
Normal 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  - 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};
|
||||
`;
|
||||
};
|
||||
3
packages/icons/src/aliases/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './aliases';
|
||||
export * from './prefixed';
|
||||
export * from './suffixed';
|
||||
4
packages/icons/src/build.ts
Normal 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';
|
||||
30
packages/icons/src/buildLucideDataUri.ts
Normal 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;
|
||||
34
packages/icons/src/buildLucideIconElement.ts
Normal 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;
|
||||
50
packages/icons/src/buildLucideIconNode.ts
Normal 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;
|
||||
19
packages/icons/src/buildLucideSvg.ts
Normal 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;
|
||||
2
packages/icons/src/dynamic.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { lucideIconNames, type LucideIconName } from './dynamicIcon';
|
||||
export { default as lucideDynamicIconImports } from './dynamicIconImports';
|
||||
8
packages/icons/src/dynamicIcon.ts
Normal 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>;
|
||||
5
packages/icons/src/lucide-icons.prefixed.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export * as icons from './icons';
|
||||
export * from './aliases/prefixed';
|
||||
export * from './types';
|
||||
|
||||
export * from './build';
|
||||
3
packages/icons/src/lucide-icons.suffixed.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * as icons from './icons';
|
||||
export * from './aliases/suffixed';
|
||||
export * from './types';
|
||||
@@ -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';
|
||||
42
packages/icons/src/types.ts
Normal 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 });
|
||||
@@ -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>
|
||||
`;
|
||||
@@ -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"}"`;
|
||||
@@ -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+"`;
|
||||
44
packages/icons/tests/buildLucideIconElement.spec.ts
Normal 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);
|
||||
});
|
||||
});
|
||||
86
packages/icons/tests/buildLucideIconNode.spec.ts
Normal 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');
|
||||
});
|
||||
});
|
||||
29
packages/icons/tests/buildLucideSvg.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
||||
18
packages/icons/tests/helpers.ts
Normal 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, '');
|
||||
10
packages/icons/tests/lucide-icons.spec.ts
Normal 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);
|
||||
});
|
||||
});
|
||||
5
packages/icons/tests/setupVitest.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import { expect } from 'vitest';
|
||||
import '@testing-library/jest-dom/vitest';
|
||||
import htmlSerializer from 'jest-serializer-html';
|
||||
|
||||
expect.addSnapshotSerializer(htmlSerializer);
|
||||
22
packages/icons/tsconfig.json
Normal 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"],
|
||||
}
|
||||
9
packages/icons/vitest.config.mts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { defineConfig } from 'vitest/config';
|
||||
|
||||
export default defineConfig({
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
setupFiles: './tests/setupVitest.js',
|
||||
}
|
||||
});
|
||||
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
|
||||