Nuxt

npm install @solar-icons/nuxt

Installation

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

• Auto-imported icons: all 7,608 static icons + 1,268 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>. Options you do not set fall back to the module defaults above.

When provider: false, the styling options are ignored and the module warns about it. Set up the state manually: either call createSolarIcons from a Nuxt plugin, or wrap app.vue in <SolarProvider>:

<!-- app.vue -->
<template>
    <SolarProvider color="#ef4444" :size="24">
        <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.

With provider: true (default), useSolar() works anywhere in the app: the module provides a global context through the runtime plugin, and the defaults live on document.body as CSS variables.

With provider: false, useSolar() must be called inside a <SolarProvider> tree that you place yourself. The provider uses scoped provide/inject; there is no global context.

ESM only

@solar-icons/nuxt is ESM-only.