Solar Icons

https://solar-icons.vercel.app/docs
Admin
Solar Icons is a comprehensive icon library providing over 1,200 unique icons in six distinct...
Tokens:10,263
Snippets:111
Trust Score:7.8
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install Solar Icons for Nuxt

Source: https://solar-icons.vercel.app/docs/getting-started/installation

Use the dedicated Nuxt module for seamless integration, including auto-import capabilities and global configuration.

```shell
nuxi module add @solar-icons/nuxt
```

--------------------------------

### Install Solar Icons for React

Source: https://solar-icons.vercel.app/docs/getting-started/installation

Install the standard React package for maximum versatility or the performance package for reduced bundle size. These packages allow for dynamic style changes or single-style integration respectively.

```shell
npm install @solar-icons/react
```

```shell
npm install @solar-icons/react-perf
```

--------------------------------

### Install Solar Icons Package

Source: https://solar-icons.vercel.app/docs/packages/react-native

Commands to install the Solar Icons library using various package managers.

```bash
npm install @solar-icons/react-native
```

--------------------------------

### Install Solar Icons for Vue

Source: https://solar-icons.vercel.app/docs/getting-started/installation

Install the official Vue package to access the full feature set of Solar Icons, including multi-style support and category imports.

```shell
npm install @solar-icons/vue
```

--------------------------------

### Import Icons from Style Entry Points (Performance Package)

Source: https://solar-icons.vercel.app/docs/getting-started/usage

Demonstrates importing icons directly from style-specific entry points in the '@solar-icons/react-perf' package, such as '@solar-icons/react-perf/bold'. This approach can lead to cleaner import statements.

```javascript
import { Home } from '@solar-icons/react-perf/bold'
import { Settings } from '@solar-icons/react-perf/linear'

export default function MyComponent() {
    return (
        <div>
            <Home size={32} />
            <Settings size={32} />
        </div>
    )
}
```

--------------------------------

### Implement Server-Side Rendering with Solar Icons

Source: https://solar-icons.vercel.app/docs/advanced/server-side-rendering

Demonstrates how to import icons from the /ssr entry point to create pure, stateless server components. This approach avoids React Context and is ideal for optimizing server-rendered HTML.

```javascript
import { ArrowUp } from '@solar-icons/react/ssr'

export default function ServerComponent() {
    return (
        <div>
            <h1>My Page</h1>
            <ArrowUp size={48} weight="BoldDuotone" />
        </div>
    )
}
```

--------------------------------

### Install @solar-icons/svelte Package

Source: https://solar-icons.vercel.app/docs/packages/svelte

Installs the @solar-icons/svelte package using npm. This is the first step to using Solar Icons in your Svelte project.

```bash
npm install @solar-icons/svelte
```

--------------------------------

### Vue Plugin Installation for Global Configuration

Source: https://solar-icons.vercel.app/docs/packages/vue

Illustrates installing the Solar Icons package as a Vue plugin for global configuration. This method allows setting default icon properties when initializing the Vue application.

```javascript
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')
```

--------------------------------

### Import and Use Icons (Performance Package)

Source: https://solar-icons.vercel.app/docs/getting-started/usage

Illustrates importing style-specific icons like 'HomeBold' and 'HomeLinear' from the '@solar-icons/react-perf' package. This package is optimized for smaller bundle sizes by providing individual icon components for each style.

```javascript
import { HomeBold, HomeLinear } from '@solar-icons/react-perf'

export default function MyComponent() {
    return (
        <div>
            <HomeBold size={32} />
            <HomeLinear size={32} color="blue" />
        </div>
    )
}
```

--------------------------------

### Import and Use Home Icon (Standard Package)

Source: https://solar-icons.vercel.app/docs/getting-started/usage

Demonstrates how to import the 'Home' icon from the '@solar-icons/react' package and use it as a React component. This package allows switching between icon styles using the 'weight' prop.

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

export default function MyComponent() {
    return <Home />
}
```

--------------------------------

### Global Configuration with SolarProvider Component

Source: https://solar-icons.vercel.app/docs/packages/nuxt

Example of using the `SolarProvider` component to set global default configurations for Solar Icons within your Nuxt application. This allows overriding module-level defaults for specific parts of your application.

```html
<template>
  <SolarProvider :size="32" color="purple" weight="Linear">
    <YourComponents />
  </SolarProvider>
</template>

<script setup>
import { SolarProvider } from '#solar-icons/lib'
</script>
```

--------------------------------

### Advanced TypeScript Integration

Source: https://solar-icons.vercel.app/docs/packages/react-native

Examples of using icon refs with Svg types and creating a custom wrapper component for dynamic icon rendering.

```typescript
import type { IconProps, Icon } from '@solar-icons/react-native';
import { useRef } from 'react';
import { Svg } from 'react-native-svg';

const MyComponent = () => {
  const iconRef = useRef<Svg>(null);
  return <HomeBold ref={iconRef} />;
};

// Custom Icon Wrapper
import * as Icons from '@solar-icons/react-native/Bold';

interface MyIconProps extends IconProps {
  name: keyof typeof Icons;
}

export const AppIcon = ({ name, ...props }: MyIconProps) => {
  const IconComponent = Icons[name];
  return <IconComponent {...props} />;
};
```

--------------------------------

### Install @solar-icons/react Package

Source: https://solar-icons.vercel.app/docs/packages/react

Installs the @solar-icons/react package using npm. This package provides Solar Icons for React applications with support for dynamic styles and global configuration.

```bash
npm install @solar-icons/react
```

--------------------------------

### Install @solar-icons/react-perf

Source: https://solar-icons.vercel.app/docs/packages/react-perf

Installs the performance-optimized Solar Icons package for React using npm. This command is essential for adding the library to your project's dependencies.

```bash
npm install @solar-icons/react-perf
```

--------------------------------

### Configure @solar-icons/nuxt Module in nuxt.config.ts

Source: https://solar-icons.vercel.app/docs/packages/nuxt

Example configuration for the @solar-icons/nuxt module in your Nuxt project's `nuxt.config.ts` file. This allows customization of icon prefixes, auto-import settings, and default icon properties.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@solar-icons/nuxt'],
  solarIcons: {
    // Prefix for auto-imported components (default: 'Solar')
    namePrefix: 'Solar',
    // Auto-import all icons as components (default: true)
    autoImport: true,
    // Inject global provider automatically (default: true)
    provider: true,
    // Default icon properties
    color: 'currentColor',
    size: 24,
    weight: 'Linear',
    mirrored: false,
  },
})
```

--------------------------------

### Change Home Icon Style (Standard Package)

Source: https://solar-icons.vercel.app/docs/getting-started/usage

Shows how to change the visual style (weight) of the 'Home' icon using the 'weight' prop in the '@solar-icons/react' package. Available weights include Bold, Linear, Outline, BoldDuotone, LineDuotone, and Broken.

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

export default function MyComponent() {
    // This will render the "Bold" version of the Home icon.
    return <Home weight="Bold" />
}
```

--------------------------------

### Import Strategies for Solar Icons

Source: https://solar-icons.vercel.app/docs/packages/react-native

Demonstrates three ways to import icons: style-specific bundles, global styled exports, and granular category imports for optimal tree-shaking.

```typescript
import { Home, User, Settings } from '@solar-icons/react-native/Bold';
import { HomeBold, HomeLinear, HeartBroken } from '@solar-icons/react-native';
import { Home } from '@solar-icons/react-native/category/ui/Bold/Home';
```

--------------------------------

### Basic Icon Usage in Svelte

Source: https://solar-icons.vercel.app/docs/packages/svelte

Demonstrates how to import and use a Solar Icon component (e.g., Home) within a Svelte component. It shows how to set the size and color props.

```svelte
<script>
    import { Home } from '@solar-icons/svelte/Bold'
</script>

<Home size={32} color="purple" />
```

--------------------------------

### Direct Individual Icon Import in Svelte

Source: https://solar-icons.vercel.app/docs/packages/svelte

Demonstrates the most efficient way to import icons for optimal tree-shaking by importing individual icon components directly. This ensures only the used icon is included in the bundle.

```svelte
<script>
    import Home from '@solar-icons/svelte/category/buildings/Bold/Home.svelte'
</script>

<Home size={24} color="#f59e0b" />
```

--------------------------------

### Importing Multiple Icons by Style in Svelte

Source: https://solar-icons.vercel.app/docs/packages/svelte

Shows how to import multiple icons from a specific style (e.g., Bold) and also from another style (e.g., Linear) in Svelte. This allows for easy access to a set of related icons.

```svelte
<script>
    import { Home, Settings, User } from '@solar-icons/svelte/Bold'
    import { Home as HomeLinear } from '@solar-icons/svelte/Linear'
</script>

<Home size={24} />
<HomeLinear size={24} />
```

--------------------------------

### Access IconStyle Enum

Source: https://solar-icons.vercel.app/docs/packages/react-native

Shows how to import the IconStyle enum to handle dynamic icon styling logic.

```typescript
import { IconStyle } from '@solar-icons/react-native';

// Values: 'Bold', 'BoldDuotone', 'Broken', 'LineDuotone', 'Linear', 'Outline'
```

--------------------------------

### Using Composition API with useSolar Hook

Source: https://solar-icons.vercel.app/docs/packages/nuxt

Demonstrates how to access and modify Solar Icon configurations at runtime using the `useSolar` Composition API hook. This allows dynamic changes to icon properties like size.

```html
<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/lib'

const { config, setSize } = useSolar()
const iconSize = ref(24)

const increaseSize = () => {
  const newSize = parseInt(iconSize.value) + 4
  iconSize.value = newSize
  setSize(newSize)
}
</script>
```

--------------------------------

### Global Configuration with SolarProvider

Source: https://solar-icons.vercel.app/docs/packages/vue

Shows how to apply global styles to all Solar Icons within a Vue application by wrapping components with the SolarProvider. This allows setting default 'size', 'color', and 'weight'.

```vue
<template>
  <SolarProvider :size="32" color="purple" weight="Linear">
    <YourComponents />
  </SolarProvider>
</template>

<script setup>
import { SolarProvider } from '@solar-icons/vue'
</script>
```

--------------------------------

### Configure Global Icon Styles with SolarProvider

Source: https://solar-icons.vercel.app/docs/advanced/global-configuration

Demonstrates how to wrap a React component tree with SolarProvider to apply default icon properties like size, color, and weight. Icons within the provider inherit these styles unless explicitly overridden.

```javascript
import { SolarProvider } from '@solar-icons/react'
import { Home, Settings, User } from '@solar-icons/react'

export default function App() {
    return (
        <SolarProvider
            value={{
                size: 24,
                color: 'navy',
                weight: 'Bold',
            }}>
            <Header />
            <MainContent />
        </SolarProvider>
    )
}

function Header() {
    return (
        <nav>
            <Home />
            <Settings weight="Linear" />
        </nav>
    )
}

function MainContent() {
    return <User />
}
```

--------------------------------

### Composition API for Icon Configuration

Source: https://solar-icons.vercel.app/docs/packages/vue

Demonstrates using the Composition API with `useSolar` to access and dynamically modify icon configurations. This allows for reactive changes to icon properties like size.

```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>
```

--------------------------------

### Creating Custom Icons with IconBase in Svelte

Source: https://solar-icons.vercel.app/docs/packages/svelte

Shows how to use the `IconBase` component from `@solar-icons/svelte` to create custom SVG icons. This component accepts standard icon props like size and color.

```svelte
<script>
    import { IconBase } from '@solar-icons/svelte'
</script>

<IconBase size={24} color="red">
    <path d="M12 2L15.09 8.26..." fill="currentColor" />
</IconBase>
```

--------------------------------

### Usage: Manual Icon Import via Aliases in Nuxt

Source: https://solar-icons.vercel.app/docs/packages/nuxt

Shows how to manually import Solar icons using provided aliases in your Nuxt templates and script. This offers more granular control over icon imports and usage.

```html
<template>
  <div>
    <ArrowUp :size="24" weight="Outline" />
    <solar.Arrows.ArrowDown :size="32" weight="BoldDuotone" />
    <Arrows.AltArrowLeft color="#fff" weight="Bold" />
  </div>
</template>

<script setup>
import { ArrowUp } from '#solar-icons'
import * as solar from '#solar-icons/category'
import { Arrows } from '#solar-icons/category'
import { SolarProvider } from '#solar-icons/lib'
</script>
```

--------------------------------

### Basic Icon Usage in React

Source: https://solar-icons.vercel.app/docs/packages/react

Demonstrates how to import and use a Solar Icon component within a React application. Icons can be customized with props like 'weight', 'color', and 'size'.

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

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

--------------------------------

### TypeScript Integration with @solar-icons/svelte

Source: https://solar-icons.vercel.app/docs/packages/svelte

Demonstrates how to import TypeScript types for icon props and styles from the main `@solar-icons/svelte` package. This ensures type safety in your Svelte projects.

```typescript
<script lang="ts">
    import type { IconProps, IconStyle } from '@solar-icons/svelte'
</script>
```

--------------------------------

### Importing Icons by Category in Svelte

Source: https://solar-icons.vercel.app/docs/packages/svelte

Illustrates importing icons based on their category (e.g., 'arrows') in Svelte. This approach allows importing all icons within a category for a given style.

```svelte
<script>
    import { Bold, Linear } from '@solar-icons/svelte/category/arrows'
</script>

<Bold.ArrowUp size={24} />
<Linear.ArrowDown size={24} />
```

--------------------------------

### Access Icon Context with useSolar Hook

Source: https://solar-icons.vercel.app/docs/advanced/global-configuration

Shows how to use the useSolar hook to access and update the current icon configuration context dynamically. This is useful for implementing features like theme toggling.

```javascript
import { useSolar } from '@solar-icons/react'
import { 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>
    )
}
```

--------------------------------

### Import Icons by Style Path in React

Source: https://solar-icons.vercel.app/docs/packages/react-perf

Shows an alternative method for importing Solar Icons from @solar-icons/react-perf by specifying the style in the import path. This approach allows importing the base icon name and is useful for cleaner code organization.

```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>
    )
}
```

--------------------------------

### Basic Icon Usage in Vue

Source: https://solar-icons.vercel.app/docs/packages/vue

Demonstrates how to import and use a Solar Icon component within a Vue template. Icons can be customized with props like 'weight', 'color', and 'size'.

```vue
<template>
  <div>
    <Home weight="Bold" color="purple" :size="32" />
  </div>
</template>

<script setup>
import { Home } from '@solar-icons/vue'
</script>
```

--------------------------------

### Category-Based Icon Imports in React

Source: https://solar-icons.vercel.app/docs/packages/react

Shows how to import all icons from a specific category as a single object in React. This allows for importing multiple icons from a category efficiently.

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

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

--------------------------------

### Import and Use Icons in React

Source: https://solar-icons.vercel.app/docs/packages/react-perf

Demonstrates how to import and use Solar Icon components from the @solar-icons/react-perf package in a React application. Icons are imported by their combined name and style, and accept props like color and size.

```jsx
import { HomeBold, SettingsLinear } from '@solar-icons/react-perf'

function App() {
    return (
        <div>
            <HomeBold color="green" size={24} />
            <SettingsLinear color="orange" size={24} />
        </div>
    )
}
```

--------------------------------

### Category Imports for Solar Icons

Source: https://solar-icons.vercel.app/docs/packages/vue

Shows how to import all icons from a specific category (e.g., 'Arrows') as a single object. This simplifies importing multiple related icons.

```vue
<template>
  <div>
    <Arrows.ArrowUp weight="Bold" />
    <Arrows.ArrowDown weight="Linear" />
  </div>
</template>

<script setup>
import { Arrows } from '@solar-icons/vue/category'
</script>
```

--------------------------------

### Usage: Auto-imported Solar Icons in Nuxt Template

Source: https://solar-icons.vercel.app/docs/packages/nuxt

Demonstrates how to use Solar icons directly as components in your Nuxt templates when auto-import is enabled. You can pass props like size, weight, and color to customize individual icons.

```html
<template>
  <div>
    <SolarArrowUp :size="24" weight="Outline" :mirrored="true" />
    <SolarArrowsArrowDown :size="32" weight="BoldDuotone" />
    <SolarArrowsAltArrowLeft color="#fff" class="bg-black" weight="Bold" />
  </div>
</template>
```

--------------------------------

### Using Solar Icons with CSS in Svelte

Source: https://solar-icons.vercel.app/docs/packages/svelte

Explains how Solar Icons can inherit text color from their parent elements when using CSS, leveraging the default `currentColor` prop. This allows for easy theming.

```svelte
<div class="text-blue-500">
    <Home size={24} />
</div>
```
Tokens:
Raw