React

Use @solar-icons/react for standard React applications. It supports dynamic styles, global configuration context, and client/server rendering.

npm install @solar-icons/react

Features

• Dynamic weights: Change styles at runtime using the weight prop.
• Global styling: Set default styles using SolarProvider.
• Tree-shakeable: Bundles only the icons you import.
• RSC & SSR ready: Works with Server-Side Rendering (SSR) and Server Components.

Usage

import { Home } from '@solar-icons/react'

function App() {
    return <Home weight="Bold" color="purple" size={32} />
}

Props

Icon components accept all standard HTML SVG attributes alongside these props:

Category Imports

Import all icons in a category as a single object:

import { Arrows } from '@solar-icons/react/category'

function App() {
    return (
        <div>
            <Arrows.ArrowUp weight="Bold" />
            <Arrows.ArrowDown weight="Linear" />
        </div>
    )
}