Vue Migration

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 most apps.
• Dynamic path: a single component that bundles all six styles and switches via weight. Use it only when you swap styles at runtime.

Import paths

Kebab-case style directories.

Before (pre-v2):

import { Home } from '@solar-icons/vue/Bold'

After (recommended — per-style):

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

After (only for runtime switching — dynamic):

import { HomeIcon } from '@solar-icons/vue/dynamic'

Top-level barrel exports disambiguated names:

import { HomeBoldIcon } from '@solar-icons/vue'

Component naming

When the style is in the import path, the name drops the style suffix and gains an Icon suffix (Home → HomeIcon). See the React migration for the full naming rules. Separate icon names were also renamed in v2. See the Icon Renames page.

Category imports removed

// Before — imports the entire category
import { Arrows } from '@solar-icons/vue/category'

After (recommended — per-style):

import { ArrowUpIcon } from '@solar-icons/vue/bold/arrow-up'

After (only for runtime switching — dynamic):

import { ArrowUpIcon } from '@solar-icons/vue/dynamic/arrow-up'

weight prop removed

The pre-v2 single package bundled six styles per component and switched via weight. v2 drops weight from the per-style path. The dynamic path keeps it.

Before:

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

<template>
    <Heart weight="Bold" />
</template>

After (recommended — per-style, no weight):

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

<template>
    <HeartIcon />
</template>

After (only for runtime switching — dynamic, keeps weight):

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

<template>
    <HeartIcon weight="Bold" />
</template>

mirrored prop removed

Use CSS scaleX(-1) instead.

SolarProvider

<SolarProvider color="#3b82f6" :size="24" :stroke-width="1.5">
  <App />
</SolarProvider>

Vue template props use kebab-case: stroke-width, secondary-color, secondary-opacity.

Duotone and stroke width

<HeartIcon secondary-color="#f59e0b" :secondary-opacity="0.4" />
<SettingsIcon :stroke-width="2" />