Nuxt

npm install @solar-icons/nuxt

Installation

The module wraps @solar-icons/vue and provides:

• Auto-imported icons: all 7,476 static icons + 1,246 dynamic icons
• SolarProvider and useSolar: auto-imported
• #solar-icons aliases: for explicit imports with full TypeScript support
• Provider defaults: configure default color, size, stroke width from nuxt.config.ts

Module options

// nuxt.config.ts
export default defineNuxtConfig({
    modules: ['@solar-icons/nuxt'],
    solarIcons: {
        namePrefix: 'Solar',
        autoImport: true,
        provider: true,
        color: 'currentColor',
        size: 24,
        strokeWidth: 1.5,
        secondaryColor: '#3b82f6',
        secondaryOpacity: 0.5,
    },
})

When provider: true (default), the module injects a global SolarState into the Nuxt Vue app and writes the configured defaults as --solar-* CSS variables on document.body (client side). useSolar() works in any component without a wrapping <SolarProvider>.

When provider: false, set up the state manually. Either call createSolarIcons from a Nuxt plugin, or wrap app.vue in <SolarProvider>:

<!-- app.vue -->
<template>
    <SolarProvider>
        <NuxtPage />
    </SolarProvider>
</template>

Auto-import

With autoImport: true (default), every icon is available in templates without explicit imports. The module registers two sets of components:

Main barrel (disambiguated names)

Pattern: {prefix}{IconName}{Style}Icon. Style is always explicit in the name.

<template>
    <SolarHeartBoldIcon color="#ef4444" :size="32" />
    <SolarSettingsOutlineIcon :stroke-width="2" />
    <SolarHomeBoldDuotoneIcon secondary-color="#3b82f6" :secondary-opacity="0.4" />
</template>

Dynamic icons (runtime style switching)

Pattern: {prefix}{IconName}Icon (no style suffix). These wrap all 6 styles and accept a weight prop.

<template>
    <SolarArrowUpIcon weight="Bold" />
    <SolarHeartIcon :weight="selectedWeight" />
</template>

SolarProvider and useSolar are auto-imported regardless of the autoImport setting.

Explicit imports with #solar-icons aliases

The module registers Nuxt aliases that resolve to @solar-icons/vue sub-paths. These work in both <script> and <template> and have full TypeScript support.

<script setup>
import { HeartIcon } from '#solar-icons/bold'
import { HeartIcon as DynamicHeart } from '#solar-icons/dynamic'
import { useSolar } from '#solar-icons/lib'
</script>

<template>
    <HeartIcon color="#ef4444" :size="32" />
    <DynamicHeart weight="Outline" />
</template>

Entry points

For consumers outside Nuxt (scripts, tests, other frameworks), the package also exports standard entry points:

In a Nuxt app, prefer the #solar-icons aliases. They resolve at build time and have TypeScript support via the generated tsconfig.

SolarProvider and useSolar

The provider and composable work identically to the Vue package. See the Vue documentation for props, CSS variables, and usage examples.

useSolar() must be called inside a <SolarProvider> tree. The provider uses scoped provide/inject. No global context.

ESM only

@solar-icons/nuxt is ESM-only.