Apply feedback

packages/lucide-preact/src/context.tsx

@@ -21,7 +21,7 @@ interface LucideProviderProps {
   color?: string;
   strokeWidth?: number;
   absoluteStrokeWidth?: boolean;
-  class?: string
+  class?: string;
 }
 
 export function LucideProvider({

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

@@ -1,4 +1,4 @@
-import { createContext, type ReactNode, useContext } from 'react';
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
 
 const LucideContext = createContext<{
   size?: number;
@@ -20,8 +20,24 @@ interface LucideProviderProps {
   absoluteStrokeWidth?: boolean;
 }
 
-export function LucideProvider({ children, ...props }: LucideProviderProps) {
+export function LucideProvider({
-  return <LucideContext.Provider value={props}>{children}</LucideContext.Provider>;
+  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,9 +1,6 @@
 import { forwardRef, createElement } from 'react';
-import { IconNode, LucideIcon, LucideProps } from './types';
+import { IconNode, LucideProps } from './types';
-
+import { toPascalCase } from '@lucide/shared';
-// import { createElement, forwardRef } from 'react';
-import { mergeClasses, toKebabCase, toPascalCase } from '@lucide/shared';
-// import { IconNode, LucideProps } from './types';
 import Icon from './Icon';
 
 /**

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

@@ -63,18 +63,18 @@ describe('Using LucideProvider', () => {
         strokeWidth={4}
       >
         <House
-          size={24}
+          size={32}
           color="blue"
-          strokeWidth={2}
+          strokeWidth={3}
         />
       </LucideProvider>,
     );
 
     const IconComponent = container.firstElementChild;
 
-    expect(IconComponent).toHaveAttribute('width', '24');
+    expect(IconComponent).toHaveAttribute('width', '32');
-    expect(IconComponent).toHaveAttribute('height', '24');
+    expect(IconComponent).toHaveAttribute('height', '32');
     expect(IconComponent).toHaveAttribute('stroke', 'blue');
-    expect(IconComponent).toHaveAttribute('stroke-width', '2');
+    expect(IconComponent).toHaveAttribute('stroke-width', '3');
   });
 });

packages/svelte/tests/lucide-svelte.spec.ts

@@ -83,7 +83,7 @@ describe('Using lucide icon components', () => {
     expect(container.innerHTML).toMatchSnapshot();
   });
 
-  it('should use context values from he global set properties', () => {
+  it('should use context values from the global set properties', () => {
     const { container } = render(ContextWrapper);
 
     const IconComponent = container.firstElementChild;

packages/vue/src/createLucideIcon.ts

@@ -1,6 +1,5 @@
 import { h } from 'vue';
-import type { FunctionalComponent } from 'vue';
+import { IconNode, LucideIcon } from './types';
-import { IconNode, LucideProps, LucideIcon } from './types';
 import Icon from './Icon';
 
 /**