` and accessibility label. | | `mirrored` | `boolean` | `false` | Flips the icon horizontally. | When `alt` is set, the component renders a `<title>` tag for screen readers. Otherwise, it defaults to `aria-hidden="true"`. ## Attribute Selectors [#attribute-selectors] This package targets SVGs using attribute selectors (e.g., `solarHeartBold` on `<svg>`) rather than custom wrapper tags. ```html  <svg solarHeartBold [size]="24" /> ``` This keeps the DOM tree clean, permits direct CSS targeting, and avoids wrapper element overhead. # Nuxt (/docs/v1/packages/nuxt) Use `@solar-icons/nuxt` to integrate Solar icons into Nuxt 3+ applications. It wraps `@solar-icons/vue` to enable auto-import, global configuration, and SSR optimization. ```shell nuxi module add @solar-icons/nuxt ``` ## Features [#features] - **Auto-import**: Icons are registered as global Vue components with an optional prefix. - **Global styling**: Set default props directly in `nuxt.config.ts`. - **SSR optimization**: Pre-configured for Nuxt 3 server-side rendering. ## Configuration [#configuration] Configure options in `nuxt.config.ts`: ```js // nuxt.config.ts export default defineNuxtConfig({ modules: ['@solar-icons/nuxt'], solarIcons: { namePrefix: 'Solar', // Component prefix (default: 'Solar') autoImport: true, // Auto-import all icons (default: true) provider: true, // Enable global provider context (default: true) color: 'currentColor', size: 24, weight: 'Linear', mirrored: false, }, }) ``` ## Usage [#usage] ### Auto-imported Components [#auto-imported-components] With auto-import enabled, render icons directly using their prefixed names (default: `Solar` + Category + IconName): ```vue <template> <div> <SolarArrowUp :size="24" weight="Outline" :mirrored="true" /> <SolarArrowsArrowDown :size="32" weight="BoldDuotone" /> <SolarArrowsAltArrowLeft color="#fff" class="bg-black" weight="Bold" /> </div> </template> ``` ### Manual Imports [#manual-imports] You can also import manually using path aliases: ```vue <template> <div> <ArrowUp :size="24" weight="Outline" /> <solar.Arrows.ArrowDown :size="32" weight="BoldDuotone" /> </div> </template> <script setup> import { ArrowUp } from '#solar-icons' import * as solar from '#solar-icons/category' </script> ``` Available aliases: - `#solar-icons` - Exports Vue components. - `#solar-icons/lib` - Exports utilities (e.g., `SolarProvider`, `useSolar`). - `#solar-icons/category` - Exports categorized icon sets. ### Composition API [#composition-api] Read or update default settings dynamically: ```vue <template> <div> <ArrowUp :size="iconSize" weight="Outline" /> <button @click="increaseSize">Resize</button> </div> </template> <script setup> import { ref } from 'vue' import { ArrowUp, useSolar } from '#solar-icons/lib' const { config, setSize } = useSolar() const iconSize = ref(24) const increaseSize = () => { const newSize = parseInt(iconSize.value) + 4 iconSize.value = newSize setSize(newSize) } </script> ``` ## Props [#props] Icon components accept standard SVG attributes alongside these props: | Prop | Type | Default | Description | | ---------- | ------------------------------------------------------------------------------- | -------------- | -------------------------------------- | | `color` | `string` | `currentColor` | Sets the icon color. | | `size` | `string \| number` | `24` | Sets width and height. | | `weight` | `'Bold' \| 'Linear' \| 'Outline' \| 'BoldDuotone' \| 'LineDuotone' \| 'Broken'` | `Linear` | Sets icon style. | | `mirrored` | `boolean` | `false` | Flips the icon horizontally if `true`. | | `alt` | `string` | `undefined` | Accessibility title. | # React Native (/docs/v1/packages/react-native) Use `@solar-icons/react-native` to integrate Solar icons into React Native and Expo applications. Requires `react-native-svg`. ```package-install @solar-icons/react-native react-native-svg ``` ## Features [#features] - **7,476 icons**: Every style variant compiled for React Native. - **Expo compatible**: Works out of the box in Expo environments. - **TypeScript ready**: Full type definitions included. --- ## Import Methods [#import-methods] This package offers three import strategies. All methods are tree-shakeable. ### 1. Import by Style [#1-import-by-style] Import multiple icons of the same style: ```tsx import { House, User, Settings } from '@solar-icons/react-native/Bold' ``` ### 2. Import globally by Name [#2-import-globally-by-name] Import icons with style suffixes from the root: ```tsx import { HouseBold, HouseLinear, HeartBroken } from '@solar-icons/react-native' ``` ### 3. Import by Category [#3-import-by-category] Import from the specific category and style path: ```tsx import { House } from '@solar-icons/react-native/category/buildings/Bold' ``` --- ## Props [#props] All components accept standard props extending `SvgProps` from `react-native-svg` (except `width` and `height`): | Prop | Type | Default | Description | | :--------- | :----------------- | :--------------- | :--------------------------- | | `size` | `number \| string` | `24` | Icon width and height. | | `color` | `string` | `'currentColor'` | Icon fill or stroke color. | | `mirrored` | `boolean` | `false` | Flips the icon horizontally. | --- ## Technical Details [#technical-details] ### Package Entry Points [#package-entry-points] | Entry Point | Content | | :------------- | :----------------------------------------------- | | `.` | Global exports and types. | | `./[Style]` | Style-specific bundles (e.g., `Bold`, `Linear`). | | `./category/*` | Direct imports for individual icons. | | `./lib/*` | Core logic, `IconBase`, and TypeScript types. | # React Performance (/docs/v1/packages/react-perf) Use `@solar-icons/react-perf` for production builds where bundle size is critical. Each component bundles only one icon style. ```package-install @solar-icons/react-perf ``` ## Features [#features] - **Performance-focused**: Each style variant is a separate component (e.g., `HomeBold`). - **Minimal bundle size**: Tree-shaking removes all unused styles from the build. - **TypeScript ready**: Full type definitions included. ## Usage [#usage] Import components using their combined name and weight: ```jsx import { HomeBold, SettingsLinear } from '@solar-icons/react-perf' function App() { return ( <div> <HomeBold color="green" size={24} /> <SettingsLinear color="orange" size={24} /> </div> ) } ``` ### Import by Style Path [#import-by-style-path] For cleaner component names, import from the style-specific entry point: ```jsx import { Home } from '@solar-icons/react-perf/bold' import { Settings } from '@solar-icons/react-perf/linear' function App() { return ( <div> <Home size={24} /> <Settings size={24} /> </div> ) } ``` ## Props [#props] Icon components accept standard HTML SVG attributes alongside these props: | Prop | Type | Default | Description | | ---------- | ------------------ | -------------- | -------------------------------------- | | `color` | `string` | `currentColor` | Sets the icon color. | | `size` | `string \| number` | `1em` | Sets width and height. | | `mirrored` | `boolean` | `false` | Flips the icon horizontally if `true`. | | `alt` | `string` | `undefined` | Accessibility title. | # React (/docs/v1/packages/react) Use `@solar-icons/react` for standard React applications. It supports dynamic styles, global configuration context, and client/server rendering. ```package-install @solar-icons/react ``` ## Features [#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 [#usage] ```jsx import { Home } from '@solar-icons/react' function App() { return <Home weight="Bold" color="purple" size={32} /> } ``` ## Props [#props] Icon components accept all standard HTML SVG attributes alongside these props: | Prop | Type | Default | Description | | ---------- | ------------------------------------------------------------------------------- | -------------- | ---------------------------------------------- | | `color` | `string` | `currentColor` | Sets the icon color. Inherits from provider. | | `size` | `string \| number` | `1em` | Sets width and height. Inherits from provider. | | `weight` | `'Bold' \| 'Linear' \| 'Outline' \| 'BoldDuotone' \| 'LineDuotone' \| 'Broken'` | `Linear` | Sets icon style. Inherits from provider. | | `mirrored` | `boolean` | `false` | Flips the icon horizontally if `true`. | | `alt` | `string` | `undefined` | Accessibility title. | --- ## Category Imports [#category-imports] Import all icons in a category as a single object: ```jsx import { Arrows } from '@solar-icons/react/category' function App() { return ( <div> <Arrows.ArrowUp weight="Bold" /> <Arrows.ArrowDown weight="Linear" /> </div> ) } ``` # Solid (/docs/v1/packages/solid) Use `@solar-icons/solid` in SolidJS applications. It features reactive components optimized for minimal bundle size. ```package-install @solar-icons/solid ``` ## Features [#features] - **SolidJS ready**: Reactivity optimized. - **Tree-shakeable**: Bundles only the icons you import. - **TypeScript ready**: Full type definitions included. ## Usage [#usage] Import icons from a style and use them as Solid components: ```tsx import { House } from '@solar-icons/solid/Bold' function App() { return <House size={32} color="purple" /> } ``` ## Props [#props] Icon components accept standard SVG attributes alongside these props: | Prop | Type | Default | Description | | ---------- | ------------------ | -------------- | -------------------------------------- | | `color` | `string` | `currentColor` | Sets the icon color. | | `size` | `string \| number` | `1em` | Sets width and height. | | `mirrored` | `boolean` | `false` | Flips the icon horizontally if `true`. | | `alt` | `string` | `undefined` | Accessibility title. | --- ## Import Patterns [#import-patterns] ### Import by Style [#import-by-style] Import all icons in a style: ```tsx import { House, Settings, User } from '@solar-icons/solid/Bold' import { House as HouseLinear } from '@solar-icons/solid/Linear' function App() { return ( <> <House size={24} /> <HouseLinear size={24} /> </> ) } ``` Available styles: `Bold`, `Linear`, `Outline`, `BoldDuotone`, `LineDuotone`, `Broken`. ### Import by Category [#import-by-category] Import icons in a category: ```tsx import { Bold, Linear } from '@solar-icons/solid/category/arrows' function App() { return ( <> <Bold.ArrowUp size={24} /> <Linear.ArrowDown size={24} /> </> ) } ``` ### Direct Component Import [#direct-component-import] Import individual components directly: ```tsx import { House } from '@solar-icons/solid/category/building/Bold' function App() { return <House size={24} color="#f59e0b" /> } ``` --- ## IconBase Component [#iconbase-component] Use `IconBase` to build custom icons: ```tsx import { IconBase } from '@solar-icons/solid' function App() { return ( <IconBase size={24} color="red"> <path d="M12 2L15.09 8.26..." fill="currentColor" /> </IconBase> ) } ``` # Svelte (/docs/v1/packages/svelte) Use `@solar-icons/svelte` in Svelte 5 projects. Built with runes for optimal performance and minimal bundle size. ```package-install @solar-icons/svelte ``` ## Features [#features] - **Svelte 5 ready**: Built with runes. - **Tree-shakeable**: Bundles only the icons you import. - **TypeScript ready**: Full type definitions included. ## Usage [#usage] Import icons from a style and use them as Svelte components: ```svelte <script> import { House } from '@solar-icons/svelte/Bold' </script> <House size={32} color="purple" /> ``` ## Props [#props] Icon components accept standard SVG attributes alongside these props: | Prop | Type | Default | Description | | ---------- | ------------------ | -------------- | -------------------------------------- | | `color` | `string` | `currentColor` | Sets the icon color. | | `size` | `string \| number` | `1em` | Sets width and height. | | `mirrored` | `boolean` | `false` | Flips the icon horizontally if `true`. | | `alt` | `string` | `undefined` | Accessibility title. | --- ## Import Patterns [#import-patterns] ### Import by Style [#import-by-style] Import all icons in a style: ```svelte <script> import { House, Settings, User } from '@solar-icons/svelte/Bold' import { House as HouseLinear } from '@solar-icons/svelte/Linear' </script> <House size={24} /> <HouseLinear size={24} /> ``` Available styles: `Bold`, `Linear`, `Outline`, `BoldDuotone`, `LineDuotone`, `Broken`. ### Import by Category [#import-by-category] Import icons in a category: ```svelte <script> import { Bold, Linear } from '@solar-icons/svelte/category/arrows' </script> <Bold.ArrowUp size={24} /> <Linear.ArrowDown size={24} /> ``` ### Direct Component Import [#direct-component-import] Import individual components directly: ```svelte <script> import House from '@solar-icons/svelte/category/buildings/Bold/House.svelte' </script> <House size={24} color="#f59e0b" /> ``` --- ## IconBase Component [#iconbase-component] Use `IconBase` to build custom icons: ```svelte <script> import { IconBase } from '@solar-icons/svelte' </script> <IconBase size={24} color="red"> <path d="M12 2L15.09 8.26..." fill="currentColor" /> </IconBase> ``` # Vue (/docs/v1/packages/vue) Use `@solar-icons/vue` in Vue 3 applications. It supports dynamic styles, global configuration, and works with Vue 3 and Nuxt. ```package-install @solar-icons/vue ``` ## Features [#features] - **Dynamic weights**: Change styles at runtime using the `weight` prop. - **Global styling**: Set default styles using `SolarProvider` or a plugin. - **Tree-shakeable**: Bundles only the icons you import. - **TypeScript ready**: Full type definitions included. ## Usage [#usage] ```vue <template> <div> <Home weight="Bold" color="purple" :size="32" /> </div> </template> <script setup> import { Home } from '@solar-icons/vue' </script> ``` ## Props [#props] Icon components accept standard SVG attributes alongside these props: | Prop | Type | Default | Description | | ---------- | ------------------------------------------------------------------------------- | -------------- | ---------------------------------------------- | | `color` | `string` | `currentColor` | Sets the icon color. Inherits from provider. | | `size` | `string \| number` | `24` | Sets width and height. Inherits from provider. | | `weight` | `'Bold' \| 'Linear' \| 'Outline' \| 'BoldDuotone' \| 'LineDuotone' \| 'Broken'` | `Linear` | Sets icon style. Inherits from provider. | | `mirrored` | `boolean` | `false` | Flips the icon horizontally if `true`. | | `alt` | `string` | `undefined` | Accessibility title. | --- ## Advanced Usage [#advanced-usage] ### Global Configuration with `SolarProvider` [#global-configuration-with-solarprovider] Wrap components in `SolarProvider` to apply default settings: ```vue <template> <SolarProvider :size="32" color="purple" weight="Linear"> <YourComponents /> </SolarProvider> </template> <script setup> import { SolarProvider } from '@solar-icons/vue' </script> ``` ### Vue Plugin [#vue-plugin] Alternatively, configure defaults globally via the Vue plugin: ```js import { createApp } from 'vue' import { SolarIconsPlugin } from '@solar-icons/vue' const app = createApp(App) app.use(SolarIconsPlugin, { color: 'currentColor', size: '24', weight: 'Linear', mirrored: false, }) app.mount('#app') ``` ### Composition API [#composition-api] Access and modify settings dynamically using `useSolar`: ```vue <template> <div> <ArrowUp :size="iconSize" weight="Outline" /> <button @click="increaseSize">Increase Size</button> </div> </template> <script setup> import { ref } from 'vue' import { ArrowUp, useSolar } from '@solar-icons/vue' const { config, setSize } = useSolar() const iconSize = ref(24) const increaseSize = () => { const newSize = parseInt(iconSize.value) + 4 iconSize.value = newSize setSize(newSize) } </script> ``` ### Category Imports [#category-imports] Import categorized collections as a single object: ```vue <template> <div> <Arrows.ArrowUp weight="Bold" /> <Arrows.ArrowDown weight="Linear" /> </div> </template> <script setup> import { Arrows } from '@solar-icons/vue/category' </script> ``` ## Nuxt Integration [#nuxt-integration] For Nuxt 3 projects, use the dedicated `@solar-icons/nuxt` package for auto-import support. ```shell nuxi module add @solar-icons/nuxt ``` # Accessibility (/docs/v2/advanced/accessibility) Solar Icons renders `<svg>` elements with sensible defaults and provides props for full control. ## Default behavior [#default-behavior] Every icon is **decorative by default**. If you do not pass an accessibility label, the SVG renders with `aria-hidden="true"`. Screen readers skip it. ```jsx <HeartIcon color="#ef4444" size={24} /> // Renders: <svg aria-hidden="true" ...> ``` This matches the [WAI-ARIA recommendation](https://www.w3.org/WAI/tutorials/images/decorative/) for decorative images. ## Providing a label [#providing-a-label] Pass `alt` to turn the icon into a meaningful element. The SVG gets a `<title>` child and removes `aria-hidden`. ```jsx <HeartIcon alt="Add to favorites" color="#ef4444" /> // Renders: <svg><title>Add to favorites

` with `display: contents`. Every icon inside reads these variables through normal CSS inheritance. ```jsx import { SolarProvider } from '@solar-icons/react' import { HeartIcon } from '@solar-icons/react/bold' ; ``` The provider sets `--solar-color: #3b82f6` on the wrapper. The icon reads `var(--solar-color, currentColor)` for its fill and stroke. ## Priority rules [#priority-rules] When multiple sources set the same property, the winner follows the rules below. 1. **Explicit prop on the icon** (highest priority). Sets inline style on the SVG. 2. **SolarProvider** (CSS variables). The icon reads `var(--solar-color, currentColor)`. When the provider sets the var, it is defined and the icon uses it. 3. **Direct CSS parent** (only when the icon is `isolated` or no provider exists). The `isolated` prop forces `currentColor` on the icon, which resolves to the closest CSS ancestor's `color` property. 4. **System default** (`24px`, `currentColor`, `1.5`). ### Example [#example] ```jsx ``` - `ArrowUpIcon` reads `var(--solar-color, currentColor)`. The provider sets `--solar-color: red`. The var is defined, so the icon uses **red**. - `ArrowDownIcon isolated` skips the provider's CSS var entirely. The SVG's `color` attribute is set to `currentColor`, which resolves to the button's `color: blue`. The icon uses **blue**. - `ArrowLeftIcon color="yellow"` sets inline `color: yellow` on the SVG. Inline style beats everything. The icon uses **yellow**. ## Isolated mode [#isolated-mode] Set `isolated` on an icon to disconnect it from `SolarProvider`. The icon then reads its values from its CSS parent (via `currentColor` for color) and uses hardcoded defaults for size and stroke. ```jsx ``` When `isolated` is `true`: - Color: `currentColor`. Resolves to the closest CSS ancestor's `color` property - Size: `24px` (hardcoded) - Stroke width: `1.5` (hardcoded) - Duotone CSS variables: `initial` (re-initialized to browser default) Use `isolated` when: - An icon sits inside a styled parent (button, link, card) and should match that parent's color - An icon is rendered in a portal or shadow DOM where CSS variable inheritance breaks - You want a subtree of icons to diverge from the global theme ## Provider nesting [#provider-nesting] Nest `SolarProvider` components to override values for a subtree. ```jsx

{/* Icons here: blue, 24px */} {/* Icons here: red, 16px */}

Dashboard