Back to Lucide

Global Styling - React Native

docs/guide/react-native/advanced/global-styling.md

1.14.0702 B
Original Source

Global Styling

Adjusting icons can be done by using color, size and stroke width. To style all icons globally, you can use a context provider.

Context Provider

For global styling using a context provider, you can use the LucideProvider component that is provided by the lucide-react-native package.

tsx
import { LucideProvider, Home } from 'lucide-react-native';

const App = () => (
  <LucideProvider
    color="red"
    size={48}
    strokeWidth={2}
  >
    <Home />
  </LucideProvider>
);

This will apply the color, size and strokeWidth props to all icons that are children of the LucideProvider.