Add context provider to solid package

packages/lucide-react/src/context.tsx

@@ -33,7 +33,4 @@ export function LucideProvider({ children, ...props }: LucideProviderProps) {
   );
 }
 
-export function useLucideContext() {
-
-  return useContext(LucideContext);;
-}
+export const useLucideContext = () => useContext(LucideContext);

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,17 +22,19 @@ 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',

packages/lucide-solid/src/context.tsx

@@ -0,0 +1,35 @@
+import {
+  createContext,
+  useContext,
+  type JSXElement
+} from "solid-js";
+
+export const LucideContext = createContext<{
+  size?: number;
+  fill?: string;
+  color?: string;
+  strokeWidth?: number;
+  absoluteStrokeWidth?: boolean;
+}>({
+  size: 24,
+  fill: 'none',
+  color: 'currentColor',
+  strokeWidth: 2,
+});
+
+interface LucideProviderProps {
+  children: JSXElement;
+  size?: number
+  fill?: string;
+  color?: string;
+  strokeWidth?: number;
+  absoluteStrokeWidth?: boolean;
+}
+
+export function LucideProvider({ children, ...props }: LucideProviderProps) {
+  return (
+    <LucideContext.Provider value={props}>
+      {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/context.spec.tsx

@@ -0,0 +1,37 @@
+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 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');
+  });
+})