diff --git a/.github/workflows/lucide-shared.yml b/.github/workflows/lucide-shared.yml index c631d04e7..c367600d2 100644 --- a/.github/workflows/lucide-shared.yml +++ b/.github/workflows/lucide-shared.yml @@ -27,7 +27,7 @@ jobs: run: pnpm install --frozen-lockfile - name: Test - run: pnpm --filter lucide-react test + run: pnpm --filter @lucide/shared test typecheck: runs-on: ubuntu-latest diff --git a/packages/lucide-react-native/src/Icon.ts b/packages/lucide-react-native/src/Icon.ts index 7fc283952..270b67ae1 100644 --- a/packages/lucide-react-native/src/Icon.ts +++ b/packages/lucide-react-native/src/Icon.ts @@ -1,6 +1,6 @@ import { createElement, forwardRef, type FunctionComponent } from 'react'; import * as NativeSvg from 'react-native-svg'; -import { buildLucideIconForReact, hasA11yProp } from '@lucide/shared'; +import { buildLucideIconForReact, hasA11yProp, mergeClasses } from '@lucide/shared'; import { childDefaultAttributes } from './defaultAttributes'; import { LucideIconData, LucideIconNode, LucideProps } from './types'; import { useLucideContext } from './context'; @@ -79,6 +79,7 @@ const Icon = forwardRef( absoluteStrokeWidth: contextAbsoluteStrokeWidth = false, nonScalingStroke: contextNonScalingStroke = false, color: contextColor = 'currentColor', + className: contextClass = '', } = useLucideContext() ?? {}; const hasAccessibleProp = Boolean(children) || hasA11yProp(rest); @@ -90,7 +91,7 @@ const Icon = forwardRef( strokeWidth: strokeWidth ?? contextStrokeWidth, absoluteStrokeWidth: absoluteStrokeWidth ?? contextAbsoluteStrokeWidth, nonScalingStroke: nonScalingStroke ?? contextNonScalingStroke, - className, + className: mergeClasses(contextClass, className), hasA11yProp: hasAccessibleProp, attributes: rest, }); diff --git a/packages/lucide-react-native/src/context.ts b/packages/lucide-react-native/src/context.ts index 3dd87faa8..347f90592 100644 --- a/packages/lucide-react-native/src/context.ts +++ b/packages/lucide-react-native/src/context.ts @@ -9,12 +9,14 @@ const LucideContext = createContext<{ */ absoluteStrokeWidth?: boolean; nonScalingStroke?: boolean; + className?: string; }>({ size: 24, color: 'currentColor', strokeWidth: 2, absoluteStrokeWidth: false, nonScalingStroke: false, + className: '', }); interface LucideProviderProps { @@ -27,6 +29,7 @@ interface LucideProviderProps { */ absoluteStrokeWidth?: boolean; nonScalingStroke?: boolean; + className?: string; } export function LucideProvider({ @@ -36,6 +39,7 @@ export function LucideProvider({ strokeWidth, absoluteStrokeWidth, nonScalingStroke, + className, }: LucideProviderProps) { const value = useMemo( () => ({ @@ -44,8 +48,9 @@ export function LucideProvider({ strokeWidth, absoluteStrokeWidth, nonScalingStroke, + className, }), - [size, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke], + [size, color, strokeWidth, absoluteStrokeWidth, nonScalingStroke, className], ); return createElement(LucideContext.Provider, { value }, children);