React Migration

The old @solar-icons/react bundled every icon with all six styles and switched via weight="Bold". v2 splits the package into two import paths. Pick the one that matches your usage.

• Per-style path (default): one style per component, tree-shakable at the import level. Use this for the vast majority of cases. Most apps render an icon in a single style and never switch at runtime.
• Dynamic path: a single component per icon that bundles all six styles and switches via weight. Use it only when you swap styles at runtime.

Import path

Same package, different import paths.

Before (pre-v2):

import { Heart } from '@solar-icons/react'
;<Heart weight="Bold" />

After (recommended — per-style):

// One component, one style. The lightest bundle you can get.
// Add `Icon` suffix to the component name (API rename, applies everywhere).
import { HeartIcon } from '@solar-icons/react/bold'
;<HeartIcon />

After (only if you switch styles at runtime — dynamic):

import { HeartIcon } from '@solar-icons/react/dynamic'
;<HeartIcon weight="Bold" />

The full set of styles is 'Bold' | 'Linear' | 'Outline' | 'BoldDuotone' | 'LineDuotone' | 'Broken'. The dynamic import bundles all six. If you render five of them or one, the bundle is the same.

Component naming

All v2 components gain an Icon suffix.

• Per-style barrel (@solar-icons/react/bold) exports HeartIcon.
• Top-level barrel (@solar-icons/react) exports HeartBoldIcon (disambiguated).
• Dynamic barrel (@solar-icons/react/dynamic) exports HeartIcon.

Default namespace export removed

// Before — pulls all 7000+ icons into the bundle
import solar from '@solar-icons/react'
;<solar.ArrowUp weight="Bold" />

This no longer exists. Import icons individually per style.

Category imports removed

// Before — imports the entire arrows category, defeats tree-shaking
import { Arrows } from '@solar-icons/react/category'
;<Arrows.ArrowUp weight="Bold" />

After (recommended — per-style):

import { ArrowUpIcon } from '@solar-icons/react/bold/arrow-up'
;<ArrowUpIcon />

After (only for runtime switching — dynamic):

import { ArrowUpIcon } from '@solar-icons/react/dynamic/arrow-up'
;<ArrowUpIcon weight="Bold" />

SSR subpath removed

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

V2 drops the /ssr subpath. All icons render on the server by default.

import { HomeIcon } from '@solar-icons/react/bold'

New features

SolarProvider, secondaryColor / secondaryOpacity, and strokeWidth are now part of every web framework package. See the React package page for the full API.