Vue
SolarProvider, useSolar, CSS variables, duotone, and stroke width for Vue 3.0+.
npm install @solar-icons/vueImport patterns
// Per-style (no style suffix in name - style is in the path)
import { HeartIcon } from '@solar-icons/vue/bold'
// Single icon (lighter on the dev server — avoids resolving ~8k modules)
import { HeartIcon } from '@solar-icons/vue/bold/heart'
// Top-level (style suffix in name)
import { HeartBoldIcon } from '@solar-icons/vue'
// Dynamic (runtime style switching)
import { HeartIcon } from '@solar-icons/vue/dynamic'Basic usage
<script setup>
import { HeartIcon } from '@solar-icons/vue/bold'
</script>
<template>
<HeartIcon color="#ef4444" :size="32" />
</template>Duotone
<template>
<HeartIcon color="#3b82f6" secondary-color="#f59e0b" :secondary-opacity="0.4" :size="48" />
</template>
<script setup>
import { HeartIcon } from '@solar-icons/vue/bold-duotone'
</script>Stroke width
<template>
<SettingsIcon :stroke-width="2" :size="24" />
</template>
<script setup>
import { SettingsIcon } from '@solar-icons/vue/linear'
</script>SolarProvider
<script setup>
import { SolarProvider } from '@solar-icons/vue'
import { HeartIcon } from '@solar-icons/vue/bold'
</script>
<template>
<SolarProvider color="#3b82f6" :size="24" :stroke-width="1.5">
<HeartIcon />
</SolarProvider>
</template>| Prop | CSS Variable | Fallback |
|---|---|---|
color | --solar-color | currentColor |
size | --solar-size | 24px |
stroke-width | --solar-stroke-width | 1.5 |
secondary-color | --solar-secondary-color | currentColor |
secondary-opacity | --solar-secondary-opacity | 0.5 |
The provider does not set defaults. Icons fall back to these values through CSS when no provider or prop is specified.
useSolar
Returns reactive Refs. Must be called inside a <SolarProvider> or after installing SolarIconsPlugin.
<script setup>
import { useSolar } from '@solar-icons/vue'
const solar = useSolar()
</script>
<template>
<button @click="solar.setColor('#ef4444')">Current: {{ solar.color }}</button>
</template>Keep solar as a single object. Vue auto-unwraps the Refs when you read them through solar.color in the template. Destructuring (const { color } = useSolar()) loses reactivity in the template.
Vue Plugin
The plugin sets global defaults for every icon in the app without a <SolarProvider> wrapper. It writes the five CSS variables on document.body and makes useSolar() available in every component.
import { createApp } from 'vue'
import { SolarIconsPlugin } from '@solar-icons/vue/lib'
import App from './App.vue'
const app = createApp(App)
app.use(SolarIconsPlugin, {
color: '#ef4444',
size: 24,
strokeWidth: 1.5,
secondaryColor: '#f59e0b',
secondaryOpacity: 0.5,
})
app.mount('#app')Calling useSolar().setColor(...) anywhere in the app updates the variables on document.body and restyles every icon.
The variables are written client-side. In server-rendered apps the first paint uses the CSS
fallbacks and the values apply after hydration. For an exact first paint, wrap your app in a
global <SolarProvider> instead, or set the variables in your global CSS.
<SolarProvider> is the scoped alternative: its variables apply to its subtree and win over the plugin's for that subtree. The plugin and a provider can be used together.
Dynamic icons
<script setup>
import { HeartIcon } from '@solar-icons/vue/dynamic'
</script>
<template>
<HeartIcon weight="BoldDuotone" color="#3b82f6" :size="32" />
</template>Icon props
| Prop | Type | Description |
|---|---|---|
color | string | Icon color |
size | string | number | Width and height |
strokeWidth | string | number | Stroke width |
secondaryColor | string | Duotone accent color |
secondaryOpacity | number | Duotone accent opacity |
isolated | boolean | Ignores provider |
alt | string | Accessibility label |
In Vue templates, kebab-case attribute names map to camelCase props (e.g. :stroke-width="2" targets strokeWidth). Either form works in templates. Use kebab-case in <template>, camelCase in <script setup>.
CSS variables
Same five variables as React.
CSS classes
Every icon renders with class solar plus solar-{name}-{style} (e.g., solar-heart-bold). See the React page for examples.
ESM only
@solar-icons/vue is ESM-only. require() does not work.
How is this guide?
Last updated on