Advanced Usage
Global Configuration
Configure default icon styles globally.
Use SolarProvider in @solar-icons/react to set default styles for nested icons.
Note
SolarProvider and the useSolar hook are only available in the @solar-icons/react package. They are not supported in @solar-icons/react-perf.
Usage
Wrap your component tree with SolarProvider and pass the default values. Nested icons use these defaults unless you override props on the component itself.
import { SolarProvider, Home, Settings } from '@solar-icons/react'
export default function App() {
return (
<SolarProvider
value={{
size: 24,
color: 'navy',
weight: 'Bold',
}}>
<Home /> {/* Renders size: 24, color: navy, weight: Bold */}
<Settings weight="Linear" /> {/* Overrides weight to Linear */}
</SolarProvider>
)
}Accepted Properties
SolarProvider accepts the following configuration properties:
Prop
Type
Prop
Type
Custom Configurations with useSolar
Use the useSolar hook to read or update the current configuration context dynamically.
import { useSolar, Sun, Moon } from '@solar-icons/react'
function ThemeToggle() {
const { value, setValue } = useSolar()
const toggleTheme = () => {
const newWeight = value.weight === 'Bold' ? 'Linear' : 'Bold'
setValue({ weight: newWeight })
}
return (
<button onClick={toggleTheme}>
{value.weight === 'Bold' ? <Moon /> : <Sun />}
<span>Toggle Weight</span>
</button>
)
}How is this guide?
Last updated on