Vue

Use @solar-icons/vue in Vue 3 applications. It supports dynamic styles, global configuration, and works with Vue 3 and Nuxt.

npm install @solar-icons/vue

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

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

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

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

Global Configuration with `SolarProvider`

Wrap components in SolarProvider to apply default settings:

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

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

Vue Plugin

Alternatively, configure defaults globally via the Vue plugin:

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

Access and modify settings dynamically using useSolar:

<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

Import categorized collections as a single object:

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

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

Nuxt Integration

For Nuxt 3 projects, use the dedicated @solar-icons/nuxt package for auto-import support.

nuxi module add @solar-icons/nuxt

On this page