feat(context-providers): Adding Context providers (#3315)

* Add context provider for svelte package

* Add context provider for react

* Remove old vue 2 package

* Add @lucide/vue package

* Remove old vue 2 doc

* Update docs

* Adjust export template

* Add context provider to solid package

* Fix context

* Implement context providers

* Add context provider to preact

* Adjust vue package!

* Fix tests

* Format code

* Add context provider for Vue

* Improve memoization

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

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

* Apply fixes

* Cleanup

* Formatting

* Move on

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

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

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

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

* Update packages/vue/tests/context.spec.ts

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

* Remove x

* update export template

* apply feedback

* fix export template

* Fixes types and tests

* fix tests

* apply feedback

* Remove class

* Formatting

* Update packages/svelte/src/context.ts

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

* Remove fill form context providers

* formatting

* Add classname to context provider

* Apply feedback

* Format code

* Rename files

* Rename tsx to ts

* Format file

---------

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

packages/lucide-preact/package.json

@@ -37,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": {
@@ -47,7 +48,7 @@
     "@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/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.ts

@@ -0,0 +1,49 @@
+import { createContext, h, 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 h(LucideContext.Provider, { value }, children);
+}
+
+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');
+  });
+});