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.

Try the codemod first

The V2 codemod can migrate deterministic Vue imports and templates in preview mode. Use --vue-v1-mode static for the recommended per-style output, or dynamic when a component style changes at runtime. Resolve provider and reported manual changes with this guide.

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" />