Format code

* Remove brand icons

* Apply feedback

* adjust schema

.cspell/custom-words.txt

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

.github/workflows/ci.yml

@@ -11,9 +11,6 @@ permissions:
   id-token: write # Required for OIDC
   contents: write
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-
 jobs:
   create-release:
     if: github.repository == 'lucide-icons/lucide' && startsWith(github.event.head_commit.message, 'feat(icons)')

.github/workflows/lucide-vue.yml

@@ -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

.github/workflows/release.yml

@@ -22,9 +22,6 @@ permissions:
   id-token: write # Required for OIDC
   contents: write
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-
 jobs:
   pre-release:
     if: github.repository == 'lucide-icons/lucide' && contains('["ericfennis", "karsa-mistmere", "jguddas"]', github.actor)
@@ -63,6 +60,7 @@ jobs:
             'lucide-svelte',
             '@lucide/astro',
             '@lucide/svelte',
+            '@lucide/vue',
           ]
     steps:
       - uses: actions/checkout@v6
@@ -138,8 +136,11 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Outline svg Icons
+        run: pnpm build:outline-icons
+
       - name: Create font in ./lucide-font
-        run: pnpm build:font --saveCodePoints
+        run: pnpm build:font
 
       - name: 'Upload to Artifacts'
         uses: actions/upload-artifact@v4

.gitignore

@@ -14,7 +14,6 @@ coverage
 stats
 *.log
 outlined
-lucide-font
 packages/**/src/icons/*.js
 packages/**/src/icons/*.ts
 packages/**/src/icons/*.tsx

categories/brands.json

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

docs/.vitepress/data/categoriesData.json

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

docs/.vitepress/data/packageData.json

@@ -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": {

docs/.vitepress/lib/codeExamples/createCodeExamples.ts

@@ -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>

docs/.vitepress/sidebar.ts

@@ -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',

docs/.vitepress/theme/components/base/ColorPicker.vue

@@ -70,7 +70,7 @@ const value = computed({
   color: var(--vp-c-text-2);
   padding: 3px 8px 3px 3px;
   height: auto;
-  font-size: 13px;
+  font-size: 14px;
   text-align: left;
   border: 1px solid transparent;
   cursor: text;
@@ -90,7 +90,7 @@ const value = computed({
   border: none;
   background: transparent;
   color: var(--vp-c-text-1);
-  font-size: 13px;
+  font-size: 14px;
   text-align: left;
   border-radius: 8px;
   cursor: text;

docs/.vitepress/theme/components/home/HomePackagesSection.data.ts

@@ -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',

docs/.vitepress/theme/components/icons/IconShowcase.vue

@@ -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">

docs/guide/installation.md

@@ -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).
 

docs/guide/packages/lucide-react-native.md

@@ -102,16 +102,10 @@ The example below imports all ES Modules, so exercise caution when using it. Imp
 
 ### Icon Component Example
 
-```tsx
-import * as icons from 'lucide-react-native/icons';
+```jsx
+import { icons } from 'lucide-react-native';
 
-interface IconProps {
-  name: keyof typeof icons;
-  color?: string;
-  size?: number;
-}
-
-const Icon = ({ name, color, size }: IconProps) => {
+const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
   return <LucideIcon color={color} size={size} />;
@@ -122,11 +116,11 @@ export default Icon;
 
 #### Using the Icon Component
 
-```tsx
+```jsx
 import Icon from './Icon';
 
 const App = () => {
-  return <Icon name="House" />;
+  return <Icon name="house" />;
 };
 
 export default App;

docs/guide/packages/lucide-static.md

@@ -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

docs/guide/packages/lucide-vue-next.md

@@ -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>
-```

docs/guide/packages/lucide-vue.md

@@ -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>

docs/vercel.json

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

icon.schema.json

@@ -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",

icons/airplay.json

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

icons/bitcoin.json

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

icons/chromium.json

@@ -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"
-    }
-  ]
-}

icons/chromium.svg

@@ -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>

icons/codepen.json

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

icons/codepen.svg

@@ -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>

icons/codesandbox.json

@@ -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"
-  ]
-}

icons/codesandbox.svg

@@ -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>

icons/dribbble.json

@@ -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"
-  ]
-}

icons/dribbble.svg

@@ -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>

icons/facebook.json

@@ -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"
-  ]
-}

icons/facebook.svg

@@ -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>

icons/figma.json

@@ -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"
-  ]
-}

icons/figma.svg

@@ -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>

icons/framer.json

@@ -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"
-  ]
-}

icons/framer.svg

@@ -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>

icons/github.json

@@ -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"
-  ]
-}

icons/github.svg

@@ -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>

icons/gitlab.json

@@ -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"
-  ]
-}

icons/gitlab.svg

@@ -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>

icons/hexagon.json

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

icons/instagram.json

@@ -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"
-  ]
-}

icons/instagram.svg

@@ -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>

icons/linkedin.json

@@ -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"
-  ]
-}

icons/linkedin.svg

@@ -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>

icons/paint-bucket.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M11 7 6 2" />
-  <path d="M18.992 12H2.041" />
+  <path d="M19 12H2" />
   <path d="M21.145 18.38A3.34 3.34 0 0 1 20 16.5a3.3 3.3 0 0 1-1.145 1.88c-.575.46-.855 1.02-.855 1.595A2 2 0 0 0 20 22a2 2 0 0 0 2-2.025c0-.58-.285-1.13-.855-1.595" />
+  <path d="m6 2 5 5" />
   <path d="m8.5 4.5 2.148-2.148a1.205 1.205 0 0 1 1.704 0l7.296 7.296a1.205 1.205 0 0 1 0 1.704l-7.592 7.592a3.615 3.615 0 0 1-5.112 0l-3.888-3.888a3.615 3.615 0 0 1 0-5.112L5.67 7.33" />
 </svg>

icons/pocket.json

@@ -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"
-  ]
-}

icons/pocket.svg

@@ -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>

icons/rail-symbol.json

@@ -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"
-  ]
-}

icons/rail-symbol.svg

@@ -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>

icons/slack.json

@@ -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"
-  ]
-}

icons/slack.svg

@@ -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>

icons/target.json

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

icons/toolbox.json

@@ -1,37 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "contributors": [
-    "karsa-mistmere"
-  ],
-  "tags": [
-    "toolkit",
-    "tools",
-    "trunk",
-    "chest",
-    "box",
-    "storage",
-    "utility",
-    "utilities",
-    "container",
-    "kit",
-    "set",
-    "repair",
-    "fix",
-    "service",
-    "maintenance",
-    "mechanic",
-    "workshop",
-    "construction",
-    "hardware",
-    "equipment",
-    "gear",
-    "handyman",
-    "engineering",
-    "craft",
-    "diy"
-  ],
-  "categories": [
-    "tools",
-    "home"
-  ]
-}

icons/toolbox.svg

@@ -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="M16 12v4" />
-  <path d="M16 6a2 2 0 0 1 1.414.586l4 4A2 2 0 0 1 22 12v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 .586-1.414l4-4A2 2 0 0 1 8 6z" />
-  <path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
-  <path d="M2 14h20" />
-  <path d="M8 12v4" />
-</svg>

icons/trello.json

@@ -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"
-  ]
-}

icons/trello.svg

@@ -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>

icons/twitch.json

@@ -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"
-  ]
-}

icons/twitch.svg

@@ -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>

icons/twitter.json

@@ -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"
-  ]
-}

icons/twitter.svg

@@ -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>

icons/youtube.json

@@ -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"
-  ]
-}

icons/youtube.svg

@@ -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>

package.json

@@ -16,7 +16,7 @@
     "lucide-svelte": "pnpm --filter lucide-svelte",
     "lucide-static": "pnpm --filter lucide-static",
     "build:outline-icons": "pnpm --filter outline-svg start",
-    "build:font": "pnpm --filter build-font start",
+    "build:font": "pnpm --filter docs prebuild:releaseJson && pnpm --filter build-font start",
     "optimize": "node ./scripts/optimizeSvgs.mts",
     "addjsons": "node ./scripts/addMissingIconJsonFiles.mts",
     "checkIcons": "node ./scripts/checkIconsAndCategories.mts",

packages/lucide-preact/package.json

@@ -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"
@@ -39,6 +37,7 @@
     "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mts --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "pnpm build:icons && vitest run",
+    "test:watch": "vitest watch",
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
@@ -46,10 +45,10 @@
     "@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",
+    "preact": "^10.26.9",
     "rollup": "^4.53.3",
     "rollup-plugin-dts": "^6.2.3",
     "typescript": "^5.8.3",

packages/lucide-preact/rollup.config.mjs

@@ -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,

packages/lucide-preact/src/Icon.ts

@@ -1,6 +1,8 @@
 import { h, toChildArray } from 'preact';
 import defaultAttributes from './defaultAttributes';
 import type { IconNode, LucideProps } from './types';
+import { useLucideContext } from './context';
+import { mergeClasses } from '@lucide/shared';
 
 interface IconComponentProps extends LucideProps {
   iconNode: IconNode;
@@ -22,29 +24,41 @@ interface IconComponentProps extends LucideProps {
  * @returns {ForwardRefExoticComponent} LucideIcon
  */
 const Icon = ({
-  color = 'currentColor',
-  size = 24,
-  strokeWidth = 2,
+  color,
+  size,
+  strokeWidth,
   absoluteStrokeWidth,
   children,
   iconNode,
   class: classes = '',
   ...rest
-}: IconComponentProps) =>
-  h(
+}: IconComponentProps) => {
+  const {
+    size: contextSize = 24,
+    strokeWidth: contextStrokeWidth = 2,
+    absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
+    color: contextColor = 'currentColor',
+    class: contextClass = '',
+  } = useLucideContext() ?? {};
+
+  const calculatedStrokeWidth =
+    absoluteStrokeWidth ?? contextAbsoluteStrokeWidth
+      ? (Number(strokeWidth ?? contextStrokeWidth) * 24) / Number(size ?? contextSize)
+      : strokeWidth ?? contextStrokeWidth;
+
+  return h(
     'svg',
     {
       ...defaultAttributes,
-      width: String(size),
-      height: size,
-      stroke: color,
-      ['stroke-width' as 'strokeWidth']: absoluteStrokeWidth
-        ? (Number(strokeWidth) * 24) / Number(size)
-        : strokeWidth,
-      class: ['lucide', classes].join(' '),
+      width: size ?? contextSize ?? 24,
+      height: size ?? contextSize ?? 24,
+      stroke: color ?? contextColor,
+      ['stroke-width' as 'strokeWidth']: calculatedStrokeWidth,
+      class: mergeClasses('lucide', contextClass, classes),
       ...rest,
     },
     [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)],
   );
+};
 
 export default Icon;

packages/lucide-preact/src/context.tsx

@@ -0,0 +1,49 @@
+import { createContext, type ComponentChildren } from 'preact';
+import { useContext, useMemo } from 'preact/hooks';
+
+const LucideContext = createContext<{
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  absoluteStrokeWidth?: boolean;
+  class?: string;
+}>({
+  size: 24,
+  color: 'currentColor',
+  strokeWidth: 2,
+  absoluteStrokeWidth: false,
+  class: '',
+});
+
+interface LucideProviderProps {
+  children: ComponentChildren;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  absoluteStrokeWidth?: boolean;
+  class?: string;
+}
+
+export function LucideProvider({
+  children,
+  size,
+  color,
+  strokeWidth,
+  absoluteStrokeWidth,
+  class: className,
+}: LucideProviderProps) {
+  const value = useMemo(
+    () => ({
+      size,
+      color,
+      strokeWidth,
+      absoluteStrokeWidth,
+      class: className,
+    }),
+    [size, color, strokeWidth, absoluteStrokeWidth, className],
+  );
+
+  return <LucideContext.Provider value={value}>{children}</LucideContext.Provider>;
+}
+
+export const useLucideContext = () => useContext(LucideContext);

packages/lucide-preact/src/lucide-preact.ts

@@ -2,6 +2,7 @@ export * from './icons';
 export * as icons from './icons';
 export * from './aliases';
 export * from './types';
+export * from './context';
 
 export { default as createLucideIcon } from './createLucideIcon';
 export { default as Icon } from './Icon';

packages/lucide-preact/tests/__snapshots__/Icon.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Using Icon Component > should render icon and match snapshot 1`] = `
 <svg
-  class="lucide "
+  class="lucide"
   fill="none"
   height="48"
   stroke="red"

packages/lucide-preact/tests/__snapshots__/context.spec.tsx.snap

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Using LucideProvider > should render the icon with LucideProvider 1`] = `
+<svg
+  class="lucide lucide-house"
+  fill="none"
+  height="48"
+  stroke="red"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="2"
+  viewBox="0 0 24 24"
+  width="48"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
+  />
+  <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"
+  />
+</svg>
+`;

packages/lucide-preact/tests/context.spec.tsx

@@ -0,0 +1,88 @@
+import { render } from '@testing-library/preact';
+import { describe, expect, it } from 'vitest';
+import { House, LucideProvider } from '../src/lucide-preact';
+
+describe('Using LucideProvider', () => {
+  it('should render the icon with LucideProvider', () => {
+    const { container } = render(
+      <LucideProvider
+        size={48}
+        color="red"
+      >
+        <House />
+      </LucideProvider>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render the icon with LucideProvider and custom strokeWidth', () => {
+    const { container } = render(
+      <LucideProvider
+        size={48}
+        color="red"
+        strokeWidth={4}
+      >
+        <House />
+      </LucideProvider>,
+    );
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('width', '48');
+    expect(IconComponent).toHaveAttribute('height', '48');
+    expect(IconComponent).toHaveAttribute('stroke', 'red');
+    expect(IconComponent).toHaveAttribute('stroke-width', '4');
+  });
+
+  it('should render the icon with LucideProvider and custom absoluteStrokeWidth', () => {
+    const { container } = render(
+      <LucideProvider
+        size={48}
+        color="red"
+        absoluteStrokeWidth
+      >
+        <House />
+      </LucideProvider>,
+    );
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('stroke-width', '1');
+  });
+
+  it("should override the provider's global props when passing props to the icon", () => {
+    const { container } = render(
+      <LucideProvider
+        size={48}
+        color="red"
+        strokeWidth={4}
+      >
+        <House
+          size={24}
+          color="blue"
+          strokeWidth={2}
+        />
+      </LucideProvider>,
+    );
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('width', '24');
+    expect(IconComponent).toHaveAttribute('height', '24');
+    expect(IconComponent).toHaveAttribute('stroke', 'blue');
+    expect(IconComponent).toHaveAttribute('stroke-width', '2');
+  });
+
+  it('should merge class names from LucideProvider and icon props', () => {
+    const { container } = render(
+      <LucideProvider class="provider-class">
+        <House class="icon-class" />
+      </LucideProvider>,
+    );
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('class', 'lucide provider-class lucide-house icon-class');
+  });
+});

packages/lucide-react-native/package.json

@@ -27,20 +27,6 @@
   "module": "dist/esm/lucide-react-native.js",
   "typings": "dist/lucide-react-native.d.ts",
   "react-native": "dist/esm/lucide-react-native.js",
-  "exports": {
-    ".": {
-      "types": "./dist/lucide-react-native.d.ts",
-      "import": "./dist/esm/lucide-react-native.js",
-      "browser": "./dist/esm/lucide-react-native.js",
-      "require": "./dist/cjs/lucide-react-native.js"
-    },
-    "./icons": {
-      "types": "./dist/icons.d.ts",
-      "import": "./dist/esm/icons/index.js",
-      "browser": "./dist/esm/icons/index.js",
-      "require": "./dist/cjs/icons/index.js"
-    }
-  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -52,13 +38,14 @@
     "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mts --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts --withAliases --aliasesFileExtension=.ts",
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "pnpm build:icons && vitest run",
+    "test:watch": "vitest watch",
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
     "@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",

packages/lucide-react-native/rollup.config.mjs

@@ -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',
@@ -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,
@@ -60,16 +60,6 @@ export default [
     ],
     plugins: [dts()],
   },
-  {
-    input: inputs[1],
-    output: [
-      {
-        file: `dist/icons.d.ts`,
-        format: 'es',
-      },
-    ],
-    plugins: [dts()],
-  },
   {
     input: `src/${outputFileName}.suffixed.ts`,
     output: [

packages/lucide-react-native/src/Icon.ts

@@ -2,9 +2,11 @@ import { createElement, forwardRef, type FunctionComponent } from 'react';
 import * as NativeSvg from 'react-native-svg';
 import defaultAttributes, { childDefaultAttributes } from './defaultAttributes';
 import { IconNode, LucideProps } from './types';
+import { useLucideContext } from './context';
 
 interface IconComponentProps extends LucideProps {
   iconNode: IconNode;
+  testID?: string;
 }
 
 /**
@@ -23,22 +25,22 @@ interface IconComponentProps extends LucideProps {
  * @returns {ForwardRefExoticComponent} LucideIcon
  */
 const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
-  (
-    {
-      color = 'currentColor',
-      size = 24,
-      strokeWidth = 2,
-      absoluteStrokeWidth,
-      children,
-      iconNode,
-      className,
-      ...rest
-    },
-    ref,
-  ) => {
+  ({ color, size, strokeWidth, absoluteStrokeWidth, children, iconNode, testID, ...rest }, ref) => {
+    const {
+      size: contextSize = 24,
+      strokeWidth: contextStrokeWidth = 2,
+      absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
+      color: contextColor = 'currentColor',
+    } = useLucideContext() ?? {};
+
+    const calculatedStrokeWidth =
+      absoluteStrokeWidth ?? contextAbsoluteStrokeWidth
+        ? (Number(strokeWidth ?? contextStrokeWidth) * 24) / Number(size ?? contextSize)
+        : strokeWidth ?? contextStrokeWidth;
+
     const customAttrs = {
-      stroke: color,
-      strokeWidth: absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth,
+      stroke: color ?? contextColor ?? defaultAttributes.stroke,
+      strokeWidth: calculatedStrokeWidth,
       ...rest,
     };
 
@@ -47,9 +49,9 @@ const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
       {
         ref,
         ...defaultAttributes,
-        className,
-        width: size,
-        height: size,
+        width: size ?? contextSize ?? defaultAttributes.width,
+        height: size ?? contextSize ?? defaultAttributes.height,
+        'data-testid': testID,
         ...customAttrs,
       },
       [

packages/lucide-react-native/src/context.tsx

@@ -0,0 +1,43 @@
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
+
+const LucideContext = createContext<{
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  absoluteStrokeWidth?: boolean;
+}>({
+  size: 24,
+  color: 'currentColor',
+  strokeWidth: 2,
+  absoluteStrokeWidth: false,
+});
+
+interface LucideProviderProps {
+  children: ReactNode;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  absoluteStrokeWidth?: boolean;
+}
+
+export function LucideProvider({
+  children,
+  size,
+  color,
+  strokeWidth,
+  absoluteStrokeWidth,
+}: LucideProviderProps) {
+  const value = useMemo(
+    () => ({
+      size,
+      color,
+      strokeWidth,
+      absoluteStrokeWidth,
+    }),
+    [size, color, strokeWidth, absoluteStrokeWidth],
+  );
+
+  return <LucideContext.Provider value={value}>{children}</LucideContext.Provider>;
+}
+
+export const useLucideContext = () => useContext(LucideContext);

packages/lucide-react-native/src/createLucideIcon.ts

@@ -1,55 +1,24 @@
-import { forwardRef, createElement, FunctionComponent } from 'react';
-import * as NativeSvg from 'react-native-svg';
-import defaultAttributes, { childDefaultAttributes } from './defaultAttributes';
-import { IconNode, LucideIcon, LucideProps } from './types';
+import { forwardRef, createElement } from 'react';
+import { IconNode, LucideProps } from './types';
+import { toPascalCase } from '@lucide/shared';
+import Icon from './Icon';
 
-const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
-  const Component = forwardRef(
-    (
-      {
-        color = 'currentColor',
-        size = 24,
-        strokeWidth = 2,
-        absoluteStrokeWidth,
-        children,
-        'data-testid': dataTestId,
-        ...rest
-      }: LucideProps,
+/**
+ * Create a Lucide icon component
+ * @param {string} iconName
+ * @param {array} iconNode
+ * @returns {ForwardRefExoticComponent} LucideIcon
+ */
+const createLucideIcon = (iconName: string, iconNode: IconNode) => {
+  const Component = forwardRef<SVGSVGElement, LucideProps>((props, ref) =>
+    createElement(Icon, {
       ref,
-    ) => {
-      const customAttrs = {
-        stroke: color,
-        strokeWidth: absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth,
-        ...rest,
-      };
-
-      return createElement(
-        NativeSvg.Svg as unknown as string,
-        {
-          ref,
-          ...defaultAttributes,
-          width: size,
-          height: size,
-          'data-testid': dataTestId,
-          ...customAttrs,
-        },
-        [
-          ...iconNode.map(([tag, attrs]) => {
-            const upperCasedTag = (tag.charAt(0).toUpperCase() +
-              tag.slice(1)) as keyof typeof NativeSvg;
-            // duplicating the attributes here because generating the OTA update bundles don't inherit the SVG properties from parent (codepush, expo-updates)
-            return createElement(
-              NativeSvg[upperCasedTag] as FunctionComponent<LucideProps>,
-              { ...childDefaultAttributes, ...customAttrs, ...attrs } as LucideProps,
-            );
-          }),
-          ...((Array.isArray(children) ? children : [children]) || []),
-        ],
-      );
-    },
+      iconNode,
+      ...props,
+    }),
   );
 
-  Component.displayName = `${iconName}`;
+  Component.displayName = toPascalCase(iconName);
 
   return Component;
 };

packages/lucide-react-native/src/lucide-react-native.prefixed.ts

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

packages/lucide-react-native/src/lucide-react-native.suffixed.ts

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

packages/lucide-react-native/src/lucide-react-native.ts

@@ -1,6 +1,8 @@
 export * from './icons';
+export * as icons from './icons';
 export * from './aliases';
 export * from './types';
+export * from './context';
 
 export { default as createLucideIcon } from './createLucideIcon';
 export { default as Icon } from './Icon';

packages/lucide-react-native/tests/__snapshots__/context.spec.tsx.snap

@@ -0,0 +1,32 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Using LucideProvider > should render the icon with LucideProvider 1`] = `
+<svg
+  fill="none"
+  height="24"
+  stroke="currentColor"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="2"
+  viewBox="0 0 24 24"
+  width="24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+  />
+  <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"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+  />
+</svg>
+`;

packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap

@@ -1,60 +1,62 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="48"
-     height="48"
-     viewbox="0 0 24 24"
-     fill="none"
-     stroke="red"
-     stroke-width="4"
-     stroke-linecap="round"
-     stroke-linejoin="round"
+<svg
+  data-testid="grid-icon"
+  fill="none"
+  height="48"
+  stroke="red"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="4"
+  viewBox="0 0 24 24"
+  width="48"
+  xmlns="http://www.w3.org/2000/svg"
 >
-  <rect fill="none"
-        stroke="red"
-        stroke-width="4"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        width="18"
-        height="18"
-        x="3"
-        y="3"
-        rx="2"
-  >
-  </rect>
-  <path fill="none"
-        stroke="red"
-        stroke-width="4"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M3 9h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="red"
-        stroke-width="4"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M3 15h18"
-  >
-  </path>
-  <path fill="none"
-        stroke="red"
-        stroke-width="4"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M9 3v18"
-  >
-  </path>
-  <path fill="none"
-        stroke="red"
-        stroke-width="4"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M15 3v18"
-  >
-  </path>
+  <rect
+    fill="none"
+    height="18"
+    rx="2"
+    stroke="red"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="4"
+    width="18"
+    x="3"
+    y="3"
+  />
+  <path
+    d="M3 9h18"
+    fill="none"
+    stroke="red"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="4"
+  />
+  <path
+    d="M3 15h18"
+    fill="none"
+    stroke="red"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="4"
+  />
+  <path
+    d="M9 3v18"
+    fill="none"
+    stroke="red"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="4"
+  />
+  <path
+    d="M15 3v18"
+    fill="none"
+    stroke="red"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="4"
+  />
 </svg>
 `;
 

packages/lucide-react-native/tests/context.spec.tsx

@@ -0,0 +1,80 @@
+import { cleanup, render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { House, LucideProvider } from '../src/lucide-react-native';
+
+vi.mock('react-native-svg');
+
+describe('Using LucideProvider', () => {
+  it('should render the icon with LucideProvider', () => {
+    cleanup();
+    const { container } = render(
+      <LucideProvider>
+        <House />
+      </LucideProvider>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render the icon with LucideProvider and custom strokeWidth', () => {
+    cleanup();
+    const testId = 'house-icon';
+    const { getByTestId } = render(
+      <LucideProvider
+        size={48}
+        color="red"
+        strokeWidth={4}
+      >
+        <House testID={testId} />
+      </LucideProvider>,
+    );
+
+    const IconComponent = getByTestId(testId);
+
+    expect(IconComponent).toHaveAttribute('width', '48');
+    expect(IconComponent).toHaveAttribute('height', '48');
+    expect(IconComponent).toHaveAttribute('stroke', 'red');
+    expect(IconComponent).toHaveAttribute('stroke-width', '4');
+  });
+
+  it('should render the icon with LucideProvider and custom absoluteStrokeWidth', () => {
+    cleanup();
+    const { container } = render(
+      <LucideProvider
+        size={48}
+        color="red"
+        absoluteStrokeWidth
+      >
+        <House />
+      </LucideProvider>,
+    );
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('stroke-width', '1');
+  });
+
+  it("should override the provider's global props when passing props to the icon", () => {
+    cleanup();
+    const { container } = render(
+      <LucideProvider
+        size={48}
+        color="red"
+        strokeWidth={4}
+      >
+        <House
+          size={32}
+          color="blue"
+          strokeWidth={3}
+        />
+      </LucideProvider>,
+    );
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('width', '32');
+    expect(IconComponent).toHaveAttribute('height', '32');
+    expect(IconComponent).toHaveAttribute('stroke', 'blue');
+    expect(IconComponent).toHaveAttribute('stroke-width', '3');
+  });
+});

packages/lucide-react-native/tests/lucide-react-native.spec.tsx

@@ -14,49 +14,53 @@ describe('Using lucide icon components', () => {
   });
 
   it('should adjust the size, stroke color and stroke width', () => {
-    const { container } = render(
+    const testId = 'grid-icon';
+    const { getByTestId } = render(
       <Grid
         size={48}
         stroke="red"
         strokeWidth={4}
+        testID={testId}
       />,
     );
 
-    const SVGElement = container.firstElementChild;
+    const GridIcon = getByTestId(testId);
 
-    expect(SVGElement).toHaveAttribute('stroke', 'red');
-    expect(SVGElement).toHaveAttribute('width', '48');
-    expect(SVGElement).toHaveAttribute('height', '48');
-    expect(SVGElement).toHaveAttribute('stroke-width', '4');
+    expect(GridIcon).toHaveAttribute('stroke', 'red');
+    expect(GridIcon).toHaveAttribute('width', '48');
+    expect(GridIcon).toHaveAttribute('height', '48');
+    expect(GridIcon).toHaveAttribute('stroke-width', '4');
 
-    expect(container.innerHTML).toMatchSnapshot();
+    expect(GridIcon).toMatchSnapshot();
   });
 
   it('should render the alias icon', () => {
-    const testId = 'pen-icon';
-    const { container } = render(
+    const penTestId = 'pen-icon';
+    const { getByTestId: getByTestId1 } = render(
       <Pen
-        data-testid={testId}
+        testID={penTestId}
         size={48}
         stroke="red"
         strokeWidth={4}
       />,
     );
 
-    const PenIconRenderedHTML = container.innerHTML;
+    const penIcon = getByTestId1(penTestId);
 
     cleanup();
 
-    const { container: Edit2Container } = render(
+    const { getByTestId: getByTestId2 } = render(
       <Edit2
-        data-testid={testId}
+        testID={penTestId}
         size={48}
         stroke="red"
         strokeWidth={4}
       />,
     );
 
-    expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML);
+    const edit2Icon = getByTestId2(penTestId);
+
+    expect(penIcon).toStrictEqual(edit2Icon);
   });
 
   it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
@@ -83,8 +87,8 @@ describe('Using lucide icon components', () => {
     const childId = 'child';
 
     const { container, getByTestId } = render(
-      <Grid data-testid={testId}>
-        <Grid data-testid={childId} />
+      <Grid testID={testId}>
+        <Grid testID={childId} />
       </Grid>,
     );
     const { children } = container.firstElementChild ?? {};
@@ -100,9 +104,9 @@ describe('Using lucide icon components', () => {
     const childId2 = 'child2';
 
     const { container, getByTestId } = render(
-      <Grid data-testid={testId}>
-        <Grid data-testid={childId1} />
-        <Grid data-testid={childId2} />
+      <Grid testID={testId}>
+        <Grid testID={childId1} />
+        <Grid testID={childId2} />
       </Grid>,
     );
     const { children } = getByTestId(testId) as unknown as { children: HTMLCollection };
@@ -123,7 +127,7 @@ describe('Using lucide icon components', () => {
 
     const { container, getByTestId } = render(
       <Grid
-        data-testid={testId}
+        testID={testId}
         fill={fill}
         color={color}
         strokeWidth={strokeWidth}

packages/lucide-react/package.json

@@ -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,10 +52,10 @@
     "@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",
+    "@vitejs/plugin-react": "^4.6.0",
     "jest-serializer-html": "^7.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

packages/lucide-react/rollup.config.mjs

@@ -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,

packages/lucide-react/src/Icon.tsx

@@ -2,6 +2,7 @@ import { createElement, forwardRef } from 'react';
 import defaultAttributes from './defaultAttributes';
 import { IconNode, LucideProps } from './types';
 import { mergeClasses, hasA11yProp } from '@lucide/shared';
+import { useLucideContext } from './context';
 
 interface IconComponentProps extends LucideProps {
   iconNode: IconNode;
@@ -24,28 +25,32 @@ interface IconComponentProps extends LucideProps {
  */
 const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
   (
-    {
-      color = 'currentColor',
-      size = 24,
-      strokeWidth = 2,
-      absoluteStrokeWidth,
-      className = '',
-      children,
-      iconNode,
-      ...rest
-    },
+    { color, size, strokeWidth, absoluteStrokeWidth, className = '', children, iconNode, ...rest },
     ref,
-  ) =>
-    createElement(
+  ) => {
+    const {
+      size: contextSize = 24,
+      strokeWidth: contextStrokeWidth = 2,
+      absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
+      color: contextColor = 'currentColor',
+      className: contextClass = '',
+    } = useLucideContext() ?? {};
+
+    const calculatedStrokeWidth =
+      absoluteStrokeWidth ?? contextAbsoluteStrokeWidth
+        ? (Number(strokeWidth ?? contextStrokeWidth) * 24) / Number(size ?? contextSize)
+        : strokeWidth ?? contextStrokeWidth;
+
+    return createElement(
       'svg',
       {
         ref,
         ...defaultAttributes,
-        width: size,
-        height: size,
-        stroke: color,
-        strokeWidth: absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth,
-        className: mergeClasses('lucide', className),
+        width: size ?? contextSize ?? defaultAttributes.width,
+        height: size ?? contextSize ?? defaultAttributes.height,
+        stroke: color ?? contextColor,
+        strokeWidth: calculatedStrokeWidth,
+        className: mergeClasses('lucide', contextClass, className),
         ...(!children && !hasA11yProp(rest) && { 'aria-hidden': 'true' }),
         ...rest,
       },
@@ -53,7 +58,8 @@ const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
         ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
         ...(Array.isArray(children) ? children : [children]),
       ],
-    ),
+    );
+  },
 );
 
 export default Icon;

packages/lucide-react/src/context.tsx

@@ -0,0 +1,40 @@
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
+import { LucideProps } from './types';
+
+type LucideConfig = {
+  size: number;
+  color: string;
+  strokeWidth: number;
+  absoluteStrokeWidth: boolean;
+  className: string;
+};
+
+const LucideContext = createContext<LucideProps>({});
+
+type LucideProviderProps = {
+  children: ReactNode;
+} & Partial<LucideConfig>;
+
+export function LucideProvider({
+  children,
+  size,
+  color,
+  strokeWidth,
+  absoluteStrokeWidth,
+  className,
+}: LucideProviderProps) {
+  const value = useMemo(
+    () => ({
+      size,
+      color,
+      strokeWidth,
+      absoluteStrokeWidth,
+      className,
+    }),
+    [size, color, strokeWidth, absoluteStrokeWidth, className],
+  );
+
+  return <LucideContext.Provider value={value}>{children}</LucideContext.Provider>;
+}
+
+export const useLucideContext = () => useContext(LucideContext);

packages/lucide-react/src/lucide-react.ts

@@ -2,6 +2,7 @@ export * from './icons';
 export * as icons from './icons';
 export * from './aliases';
 export * from './types';
+export * from './context';
 
 export { default as createLucideIcon } from './createLucideIcon';
 export { default as Icon } from './Icon';

packages/lucide-react/tests/__snapshots__/context.spec.tsx.snap

@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Using LucideProvider > should render the icon with LucideProvider 1`] = `
+<svg
+  aria-hidden="true"
+  class="lucide lucide-house"
+  fill="none"
+  height="48"
+  stroke="red"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="2"
+  viewBox="0 0 24 24"
+  width="48"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
+  />
+  <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"
+  />
+</svg>
+`;

packages/lucide-react/tests/context.spec.tsx

@@ -0,0 +1,99 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { House, LucideProvider } from '../src/lucide-react';
+
+describe('Using LucideProvider', () => {
+  it('should render the icon with LucideProvider', () => {
+    const { container } = render(
+      <LucideProvider
+        size={48}
+        color="red"
+      >
+        <House />
+      </LucideProvider>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render the icon with default props when no provider is used', () => {
+    const { container } = render(<House />);
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('width', '24');
+    expect(IconComponent).toHaveAttribute('height', '24');
+    expect(IconComponent).toHaveAttribute('stroke', 'currentColor');
+    expect(IconComponent).toHaveAttribute('stroke-width', '2');
+  });
+
+  it('should render the icon with LucideProvider and custom strokeWidth', () => {
+    const { container } = render(
+      <LucideProvider
+        size={48}
+        color="red"
+        strokeWidth={4}
+      >
+        <House />
+      </LucideProvider>,
+    );
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('width', '48');
+    expect(IconComponent).toHaveAttribute('height', '48');
+    expect(IconComponent).toHaveAttribute('stroke', 'red');
+    expect(IconComponent).toHaveAttribute('stroke-width', '4');
+  });
+
+  it('should render the icon with LucideProvider and custom absoluteStrokeWidth', () => {
+    const { container } = render(
+      <LucideProvider
+        size={48}
+        color="red"
+        absoluteStrokeWidth
+      >
+        <House />
+      </LucideProvider>,
+    );
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('stroke-width', '1');
+  });
+
+  it("should override the provider's global props when passing props to the icon", () => {
+    const { container } = render(
+      <LucideProvider
+        size={48}
+        color="red"
+        strokeWidth={4}
+      >
+        <House
+          size={24}
+          color="blue"
+          strokeWidth={2}
+        />
+      </LucideProvider>,
+    );
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('width', '24');
+    expect(IconComponent).toHaveAttribute('height', '24');
+    expect(IconComponent).toHaveAttribute('stroke', 'blue');
+    expect(IconComponent).toHaveAttribute('stroke-width', '2');
+  });
+
+  it('should merge className from provider and icon', () => {
+    const { container } = render(
+      <LucideProvider className="provider-class">
+        <House className="icon-class" />
+      </LucideProvider>,
+    );
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('class', 'lucide provider-class lucide-house icon-class');
+  });
+});

packages/lucide-solid/package.json

@@ -62,7 +62,10 @@
     "build:version": "node ./scripts/replaceVersion.mjs",
     "build:bundle": "rollup -c rollup.config.mjs",
     "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mts --renderUniqueKey --withAliases --separateAliasesFile --separateAliasesFileIgnore=fingerprint --aliasesFileExtension=.ts --iconFileExtension=.tsx --exportFileName=index.ts",
+    "typecheck": "tsc",
+    "typecheck:watch": "tsc -w",
     "test": "pnpm build:icons && vitest run",
+    "test:watch": "vitest watch",
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
@@ -74,7 +77,7 @@
     "@lucide/shared": "workspace:*",
     "@rollup/plugin-babel": "^6.0.4",
     "@solidjs/testing-library": "^0.8.10",
-    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/jest-dom": "^6.6.3",
     "babel-preset-solid": "^1.8.12",
     "jest-serializer-html": "^7.1.0",
     "rollup": "^4.53.3",

packages/lucide-solid/src/Icon.tsx

@@ -1,8 +1,9 @@
-import { For, splitProps } from 'solid-js';
+import { For, splitProps, useContext } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 import defaultAttributes from './defaultAttributes';
 import { IconNode, LucideProps } from './types';
 import { mergeClasses, toKebabCase, toPascalCase } from '@lucide/shared';
+import { LucideContext } from './context';
 
 interface IconProps {
   name?: string;
@@ -21,28 +22,40 @@ const Icon = (props: LucideProps & IconProps) => {
     'absoluteStrokeWidth',
   ]);
 
+  const globalProps = useContext(LucideContext);
+
   return (
     <svg
       {...defaultAttributes}
-      width={localProps.size ?? defaultAttributes.width}
-      height={localProps.size ?? defaultAttributes.height}
-      stroke={localProps.color ?? defaultAttributes.stroke}
+      width={localProps.size ?? globalProps.size ?? defaultAttributes.width}
+      height={localProps.size ?? globalProps.size ?? defaultAttributes.height}
+      stroke={localProps.color ?? globalProps.color ?? defaultAttributes.stroke}
       stroke-width={
-        localProps.absoluteStrokeWidth
-          ? (Number(localProps.strokeWidth ?? defaultAttributes['stroke-width']) * 24) /
-            Number(localProps.size)
-          : Number(localProps.strokeWidth ?? defaultAttributes['stroke-width'])
+        (localProps.absoluteStrokeWidth ?? globalProps.absoluteStrokeWidth) === true
+          ? (Number(
+              localProps.strokeWidth ??
+                globalProps.strokeWidth ??
+                defaultAttributes['stroke-width'],
+            ) *
+              24) /
+            Number(localProps.size ?? globalProps.size)
+          : Number(
+              localProps.strokeWidth ??
+                globalProps.strokeWidth ??
+                defaultAttributes['stroke-width'],
+            )
       }
       class={mergeClasses(
         'lucide',
         'lucide-icon',
+        globalProps.class,
         ...(localProps.name != null
           ? [
               `lucide-${toKebabCase(toPascalCase(localProps.name))}`,
               `lucide-${toKebabCase(localProps.name)}`,
             ]
           : []),
-        localProps.class != null ? localProps.class : '',
+        localProps.class,
       )}
       {...rest}
     >

packages/lucide-solid/src/context.tsx

@@ -0,0 +1,36 @@
+import { createContext, splitProps, type JSXElement } from 'solid-js';
+
+export const LucideContext = createContext<{
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  absoluteStrokeWidth?: boolean;
+  class?: string;
+}>({
+  size: 24,
+  color: 'currentColor',
+  strokeWidth: 2,
+  absoluteStrokeWidth: false,
+  class: '',
+});
+
+interface LucideProviderProps {
+  children: JSXElement;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  absoluteStrokeWidth?: boolean;
+  class?: string;
+}
+
+export function LucideProvider(props: LucideProviderProps) {
+  const [value, rest] = splitProps(props, [
+    'size',
+    'color',
+    'strokeWidth',
+    'absoluteStrokeWidth',
+    'class',
+  ]);
+
+  return <LucideContext.Provider value={value}>{rest.children}</LucideContext.Provider>;
+}

packages/lucide-solid/src/lucide-solid.ts

@@ -2,5 +2,6 @@ export * from './icons';
 export * as icons from './icons';
 export * from './aliases';
 export * from './types';
+export * from './context';
 
 export { default as Icon } from './Icon';

packages/lucide-solid/tests/__snapshots__/context.spec.tsx.snap

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Using LucideProvider > should render the icon with LucideProvider 1`] = `
+<svg
+  class="lucide lucide-icon lucide-house"
+  fill="none"
+  height="48"
+  stroke="red"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="2"
+  viewBox="0 0 24 24"
+  width="48"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
+    key="5wwlr5"
+  />
+  <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"
+  />
+</svg>
+`;

packages/lucide-solid/tests/context.spec.tsx

@@ -0,0 +1,102 @@
+import { render } from '@solidjs/testing-library';
+import { describe, expect, it } from 'vitest';
+import { House, LucideProvider } from '../src/lucide-solid';
+
+describe('Using LucideProvider', () => {
+  it('should render the icon with LucideProvider', () => {
+    const { container } = render(() => (
+      <LucideProvider
+        size={48}
+        color="red"
+      >
+        <House />
+      </LucideProvider>
+    ));
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render the icon with default props when no provider is used', () => {
+    const { container } = render(() => <House />);
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('width', '24');
+    expect(IconComponent).toHaveAttribute('height', '24');
+    expect(IconComponent).toHaveAttribute('stroke', 'currentColor');
+    expect(IconComponent).toHaveAttribute('stroke-width', '2');
+  });
+
+  it('should render the icon with LucideProvider and custom strokeWidth', () => {
+    const { container } = render(() => (
+      <LucideProvider
+        size={48}
+        color="red"
+        strokeWidth={4}
+      >
+        <House />
+      </LucideProvider>
+    ));
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('width', '48');
+    expect(IconComponent).toHaveAttribute('height', '48');
+    expect(IconComponent).toHaveAttribute('stroke', 'red');
+    expect(IconComponent).toHaveAttribute('stroke-width', '4');
+  });
+
+  it('should render the icon with LucideProvider and custom absoluteStrokeWidth', () => {
+    const { container } = render(() => (
+      <LucideProvider
+        size={48}
+        color="red"
+        absoluteStrokeWidth
+      >
+        <House />
+      </LucideProvider>
+    ));
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('stroke-width', '1');
+  });
+
+  it("should override the provider's global props when passing props to the icon", () => {
+    const { container } = render(() => (
+      <LucideProvider
+        size={48}
+        color="red"
+        strokeWidth={4}
+      >
+        <House
+          size={24}
+          color="blue"
+          strokeWidth={2}
+        />
+      </LucideProvider>
+    ));
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute('width', '24');
+    expect(IconComponent).toHaveAttribute('height', '24');
+    expect(IconComponent).toHaveAttribute('stroke', 'blue');
+    expect(IconComponent).toHaveAttribute('stroke-width', '2');
+  });
+
+  it('should merge className from provider and icon', () => {
+    const { container } = render(() => (
+      <LucideProvider class="provider-class">
+        <House class="icon-class" />
+      </LucideProvider>
+    ));
+
+    const IconComponent = container.firstElementChild;
+
+    expect(IconComponent).toHaveAttribute(
+      'class',
+      'lucide lucide-icon provider-class lucide-house icon-class',
+    );
+  });
+});

packages/lucide-svelte/package.json

@@ -61,7 +61,7 @@
     "@lucide/helpers": "workspace:*",
     "@sveltejs/package": "^2.2.3",
     "@sveltejs/vite-plugin-svelte": "^2.4.2",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^4.0.2",
     "@tsconfig/svelte": "^5.0.0",
     "jest-serializer-html": "^7.1.0",

packages/lucide-vue-next/package.json

@@ -25,9 +25,7 @@
   "amdName": "lucide-vue-next",
   "source": "build/lucide-vue-next.js",
   "main": "dist/cjs/lucide-vue-next.js",
-  "main:umd": "dist/umd/lucide-vue-next.js",
   "module": "dist/esm/lucide-vue-next.js",
-  "unpkg": "dist/umd/lucide-vue-next.min.js",
   "typings": "dist/lucide-vue-next.d.ts",
   "sideEffects": false,
   "files": [
@@ -48,7 +46,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/vue": "^8.1.0",
     "@vitejs/plugin-vue": "^6.0.2",
     "@vue/test-utils": "2.4.6",