Merge branch 'main' of https://github.com/lucide-icons/lucide into adding-use-cases

This commit is contained in:
Eric Fennis
2026-06-26 08:49:58 +02:00
22 changed files with 706 additions and 323 deletions
@@ -11,6 +11,14 @@ const { isDark } = useData();
const emit = defineEmits(['update:modelValue']);
function limitHexInput(val: string) {
if (val.startsWith('#')) {
return val.slice(0, 9);
}
return val.slice(0, 8);
}
const value = computed({
get: () => {
if (props.modelValue == null || props.modelValue === 'currentColor') {
@@ -19,7 +27,7 @@ const value = computed({
return props.modelValue;
},
set: (val) => emit('update:modelValue', val),
set: (val) => emit('update:modelValue', limitHexInput(val)),
});
</script>
@@ -41,6 +49,7 @@ const value = computed({
class="color-input-text"
aria-label="Color picker input"
v-model="value"
maxlength="9"
placeholder="[default]"
/>
</div>
@@ -91,6 +100,7 @@ const value = computed({
background: transparent;
color: var(--vp-c-text-1);
font-size: 13px;
font-family: var(--vp-font-family-mono);
text-align: left;
border-radius: 8px;
cursor: text;
@@ -73,13 +73,11 @@ const customizingActive = computed(() => {
id="icon-color"
label="Color"
>
<template #display>
<ColorPicker
v-model="color"
id="icon-color"
class="color-picker"
/>
</template>
<ColorPicker
v-model="color"
id="icon-color"
class="color-picker"
/>
</InputField>
<InputField
@@ -161,6 +159,6 @@ const customizingActive = computed(() => {
}
.color-picker {
margin-left: auto;
width: 100%;
}
</style>
+64 -28
View File
@@ -12,19 +12,23 @@ Implementation of the Lucide icon library for web applications.
::: code-group
```sh [pnpm]
pnpm add lucide@next
pnpm add lucide
```
```sh [yarn]
yarn add lucide@next
yarn add lucide
```
```sh [npm]
npm install lucide@next
npm install lucide
```
```sh [bun]
bun add lucide@next
bun add lucide
```
```sh [deno]
deno add lucide
```
:::
@@ -38,19 +42,23 @@ Implementation of the Lucide icon library for React applications.
::: code-group
```sh [pnpm]
pnpm add lucide-react@next
pnpm add lucide-react
```
```sh [yarn]
yarn add lucide-react@next
yarn add lucide-react
```
```sh [npm]
npm install lucide-react@next
npm install lucide-react
```
```sh [bun]
bun add lucide-react@next
bun add lucide-react
```
```sh [deno]
deno add lucide-react
```
:::
@@ -80,6 +88,10 @@ npm install @lucide/vue
bun add @lucide/vue
```
```sh [deno]
deno add @lucide/vue
```
:::
For more details, see the [documentation](./vue/index.md).
@@ -91,19 +103,23 @@ Implementation of the Lucide icon library for Svelte applications.
::: code-group
```sh [pnpm]
pnpm add @lucide/svelte@next
pnpm add @lucide/svelte
```
```sh [yarn]
yarn add @lucide/svelte@next
yarn add @lucide/svelte
```
```sh [npm]
npm install @lucide/svelte@next
npm install @lucide/svelte
```
```sh [bun]
bun add @lucide/svelte@next
bun add @lucide/svelte
```
```sh [deno]
deno add @lucide/svelte
```
:::
> `@lucide/svelte` is only for Svelte 5, for Svelte 4 use the `lucide-svelte` package.
@@ -117,19 +133,23 @@ Implementation of the Lucide icon library for Solid applications.
::: code-group
```sh [pnpm]
pnpm add lucide-solid@next
pnpm add lucide-solid
```
```sh [yarn]
yarn add lucide-solid@next
yarn add lucide-solid
```
```sh [npm]
npm install lucide-solid@next
npm install lucide-solid
```
```sh [bun]
bun add lucide-solid@next
bun add lucide-solid
```
```sh [deno]
deno add lucide-solid
```
:::
@@ -158,6 +178,10 @@ npm install @lucide/angular
bun add @lucide/angular
```
```sh [deno]
deno add @lucide/angular
```
:::
For more details, see the [documentation](./angular/index.md).
@@ -169,19 +193,23 @@ Implementation of the Lucide icon library for preact applications.
::: code-group
```sh [pnpm]
pnpm add lucide-preact@next
pnpm add lucide-preact
```
```sh [yarn]
yarn add lucide-preact@next
yarn add lucide-preact
```
```sh [npm]
npm install lucide-preact@next
npm install lucide-preact
```
```sh [bun]
bun add lucide-preact@next
bun add lucide-preact
```
```sh [deno]
deno add lucide-preact
```
@@ -196,19 +224,23 @@ Implementation of the Lucide icon library for Astro applications.
::: code-group
```sh [pnpm]
pnpm add @lucide/astro@next
pnpm add @lucide/astro
```
```sh [yarn]
yarn add @lucide/astro@next
yarn add @lucide/astro
```
```sh [npm]
npm install @lucide/astro@next
npm install @lucide/astro
```
```sh [bun]
bun add @lucide/astro@next
bun add @lucide/astro
```
```sh [deno]
deno add @lucide/astro
```
:::
@@ -222,19 +254,23 @@ Implementation of the Lucide icon library for multiple usages that like to use:
::: code-group
```sh [pnpm]
pnpm add lucide-static@next
pnpm add lucide-static
```
```sh [yarn]
yarn add lucide-static@next
yarn add lucide-static
```
```sh [npm]
npm install lucide-static@next
npm install lucide-static
```
```sh [bun]
bun add lucide-static@next
bun add lucide-static
```
```sh [deno]
deno add lucide-static
```
:::
+15 -10
View File
@@ -35,9 +35,20 @@ interface AnalyticsResponse {
}[];
}
const writeIconPopularity = async (iconVisitCounts: Record<string, number>) => {
const writePopularityPromises = Object.entries(iconVisitCounts).map(([iconName, count]) => {
const location = path.resolve(iconPopularityDirectory, `${iconName}.json`);
return fs.promises.writeFile(location, JSON.stringify({ count }, null, 2), 'utf-8');
});
await Promise.all(writePopularityPromises);
console.log('Successfully written icon popularity data for', writePopularityPromises.length, 'icons.');
};
if (process.env.LUCIDE_ANALYTICS_TOKEN === undefined) {
console.error('LUCIDE_ANALYTICS_TOKEN environment variable is not set. Please set it to fetch analytics data.');
process.exit(1);
console.warn('LUCIDE_ANALYTICS_TOKEN environment variable is not set. Writing default icon popularity data.');
await writeIconPopularity(defaultIconNamePopularity);
process.exit(0);
}
try {
@@ -85,15 +96,9 @@ try {
return acc;
}, defaultIconNamePopularity);
const writePopularityPromises = Object.entries(iconVisitCounts).map(([iconName, count]) => {
const location = path.resolve(iconPopularityDirectory, `${iconName}.json`);
return fs.promises.writeFile(location, JSON.stringify({ count }, null, 2), 'utf-8');
});
await Promise.all(writePopularityPromises);
console.log('Successfully written icon popularity data for', writePopularityPromises.length, 'icons.');
await writeIconPopularity(iconVisitCounts);
} catch (error) {
console.error('Error fetching analytics data:', error);
await writeIconPopularity(defaultIconNamePopularity);
}
+32
View File
@@ -0,0 +1,32 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"Patolord"
],
"use-cases": [
"indicate injury or fracture status in health/fitness tracking",
"show an error or failed state in healthcare UI flows"
],
"tags": [
"bone",
"fracture",
"injury",
"orthopedic",
"medical",
"anatomy",
"skeletal",
"broken",
"xray",
"trauma",
"health",
"vet",
"veterinary",
"crack",
"break",
"damage"
],
"categories": [
"medical",
"animals"
]
}
+18
View File
@@ -0,0 +1,18 @@
<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="M14 4.5a1 1 0 0 1 5 0 .5.5 0 0 0 .5.5 1 1 0 0 1 0 5c-.81 0-1.8-.7-2.5 0l-1.958 1.957a.15.15 0 0 1-.252-.072l-.493-2.07a.15.15 0 0 0-.111-.112l-2.072-.494a.15.15 0 0 1-.072-.252L14 7c.7-.7 0-1.69 0-2.5" />
<path d="m16 20-1-2" />
<path d="m20 16-2-1" />
<path d="m4 8 2 1" />
<path d="m8 4 1 2" />
<path d="M9.698 14.19a.15.15 0 0 0 .112.112l2.074.489a.15.15 0 0 1 .072.252L10 17c-.7.7 0 1.69 0 2.5a1 1 0 0 1-5 0 .495.495 0 0 0-.5-.5 1 1 0 0 1 0-5c.81 0 1.8.7 2.5 0l1.956-1.957a.15.15 0 0 1 .252.072z" />
</svg>

After

Width:  |  Height:  |  Size: 732 B

+28
View File
@@ -0,0 +1,28 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"colebemis",
"jguddas",
"Barakudum",
"rrod497"
],
"use-cases": [
"exporting or downloading data from a database",
"syncing data from a remote to a local environment"
],
"tags": [
"storage",
"memory",
"bytes",
"server",
"export",
"download",
"backup",
"pull",
"downsize"
],
"categories": [
"devices",
"development"
]
}
+18
View File
@@ -0,0 +1,18 @@
<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 19 3 3 3-3" />
<path d="M19 16v6" />
<path d="M21 12.536V5" />
<path d="M3 12A9 3 0 0 0 15.182 14.806" />
<path d="M3 5V19A9 3 0 0 0 13.318 21.968" />
<ellipse cx="12" cy="5" rx="9" ry="3" />
</svg>

After

Width:  |  Height:  |  Size: 425 B

+29
View File
@@ -0,0 +1,29 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"colebemis",
"jguddas",
"Barakudum",
"rrod497"
],
"use-cases": [
"importing or uploading data into a database",
"restoring from a backup",
"pushing local data to a remote database"
],
"tags": [
"storage",
"memory",
"bytes",
"server",
"import",
"upload",
"backup",
"push",
"upscale"
],
"categories": [
"devices",
"development"
]
}
+18
View File
@@ -0,0 +1,18 @@
<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="M19 22v-6" />
<path d="M21 12.536V5" />
<path d="m22 19-3-3-3 3" />
<path d="M3 12A9 3 0 0 0 14.457 14.886" />
<path d="M3 5V19A9 3 0 0 0 13.318 21.968" />
<ellipse cx="12" cy="5" rx="9" ry="3" />
</svg>

After

Width:  |  Height:  |  Size: 426 B

+30
View File
@@ -0,0 +1,30 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"colebemis",
"jguddas",
"Barakudum",
"rrod497"
],
"use-cases": [
"indicating a successful database connection",
"showing a verified or healthy database instance",
"confirming backup integrity or successful sync"
],
"tags": [
"storage",
"memory",
"bytes",
"server",
"check",
"success",
"valid",
"verified",
"confirmed",
"complete"
],
"categories": [
"devices",
"development"
]
}
+17
View File
@@ -0,0 +1,17 @@
<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 19 2 2 4-4" />
<path d="M21 13.127V5" />
<path d="M3 12A9 3 0 0 0 21 12" />
<path d="M3 5V19A9 3 0 0 0 13.318 21.968" />
<ellipse cx="12" cy="5" rx="9" ry="3" />
</svg>

After

Width:  |  Height:  |  Size: 393 B

+28
View File
@@ -0,0 +1,28 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"colebemis",
"jguddas",
"Barakudum",
"rrod497"
],
"use-cases": [
"removing a database instance",
"deleting or detaching a database connection",
"reducing allocated database resources"
],
"tags": [
"storage",
"memory",
"bytes",
"server",
"minus",
"remove",
"delete",
"reduce"
],
"categories": [
"devices",
"development"
]
}
+17
View File
@@ -0,0 +1,17 @@
<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 15V5" />
<path d="M22 19h-6" />
<path d="M3 12A9 3 0 0 0 21 12" />
<path d="M3 5V19A9 3 0 0 0 13.318 21.968" />
<ellipse cx="12" cy="5" rx="9" ry="3" />
</svg>

After

Width:  |  Height:  |  Size: 384 B

+29
View File
@@ -0,0 +1,29 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"colebemis",
"jguddas",
"Barakudum",
"rrod497"
],
"use-cases": [
"creating a new database instance",
"adding a database connection in a client or admin panel"
],
"tags": [
"storage",
"memory",
"bytes",
"server",
"plus",
"add",
"create",
"insert",
"new",
"expand"
],
"categories": [
"devices",
"development"
]
}
+18
View File
@@ -0,0 +1,18 @@
<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="M19 16v6" />
<path d="M21 12.536V5" />
<path d="M22 19h-6" />
<path d="M3 12A9 3 0 0 0 15.1824 14.8061" />
<path d="M3 5V19A9 3 0 0 0 13.318 21.968" />
<ellipse cx="12" cy="5" rx="9" ry="3" />
</svg>

After

Width:  |  Height:  |  Size: 422 B

+33
View File
@@ -0,0 +1,33 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"colebemis",
"jguddas",
"Barakudum",
"rrod497"
],
"use-cases": [
"indicating a failed or lost database connection",
"displaying error states in monitoring tools",
"representing rejected queries or destructive operations"
],
"tags": [
"storage",
"memory",
"bytes",
"server",
"x",
"error",
"failed",
"invalid",
"rejected",
"denied",
"clear",
"remove",
"disconnect"
],
"categories": [
"devices",
"development"
]
}
+19
View File
@@ -0,0 +1,19 @@
<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="m17 17 5 5" />
<path d="M19.323 13.744A9 3 0 0 0 21 12" />
<path d="M21 13.127V5" />
<path d="m22 17-5 5" />
<path d="M3 12A9 3 0 0 0 13.563 14.954" />
<path d="M3 5V19A9 3 0 0 0 13 21.981" />
<ellipse cx="12" cy="5" rx="9" ry="3" />
</svg>

After

Width:  |  Height:  |  Size: 465 B

@@ -5,7 +5,7 @@ import pkg from './package.json' with { type: 'json' };
const packageName = 'LucideReact';
const outputFileName = 'lucide-react-native';
const outputDir = 'dist';
const inputs = ['src/lucide-react-native.ts', 'src/icons/index.ts'];
const inputs = ['src/lucide-react-native.ts'];
const bundles = [
{
format: 'cjs',
@@ -63,7 +63,7 @@ export default [
plugins: [dts()],
},
{
input: inputs[1],
input: 'src/icons/index.ts',
output: [
{
file: `dist/icons.d.ts`,
+1 -1
View File
@@ -84,7 +84,7 @@
"typescript": "^5.8.3",
"vite": "^7.2.4",
"vite-plugin-solid": "^2.11.6",
"esbuild": "^0.25.0"
"esbuild": "^0.28.1"
},
"peerDependencies": {
"solid-js": "^1.4.7"
+272 -272
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -10,7 +10,7 @@
"dependencies": {
"@rollup/plugin-node-resolve": "^16.0.3",
"@rollup/plugin-replace": "^6.0.3",
"esbuild": "^0.27.0",
"esbuild": "^0.28.1",
"rollup": "^4.59.0",
"rollup-plugin-esbuild": "^6.2.1",
"rollup-plugin-license": "^3.6.0",