Nuxt

Use @solar-icons/nuxt to integrate Solar icons into Nuxt 3+ applications. It wraps @solar-icons/vue to enable auto-import, global configuration, and SSR optimization.

nuxi module add @solar-icons/nuxt

Features

Auto-import: Icons are registered as global Vue components with an optional prefix.
Global styling: Set default props directly in nuxt.config.ts.
SSR optimization: Pre-configured for Nuxt 3 server-side rendering.

Configuration

Configure options in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
    modules: ['@solar-icons/nuxt'],
    solarIcons: {
        namePrefix: 'Solar',  // Component prefix (default: 'Solar')
        autoImport: true,     // Auto-import all icons (default: true)
        provider: true,       // Enable global provider context (default: true)
        color: 'currentColor',
        size: 24,
        weight: 'Linear',
        mirrored: false,
    },
})

Usage

Auto-imported Components

With auto-import enabled, render icons directly using their prefixed names (default: Solar + Category + IconName):

<template>
    <div>
        <SolarArrowUp :size="24" weight="Outline" :mirrored="true" />
        <SolarArrowsArrowDown :size="32" weight="BoldDuotone" />
        <SolarArrowsAltArrowLeft color="#fff" class="bg-black" weight="Bold" />
    </div>
</template>

Manual Imports

You can also import manually using path aliases:

<template>
    <div>
        <ArrowUp :size="24" weight="Outline" />
        <solar.Arrows.ArrowDown :size="32" weight="BoldDuotone" />
    </div>
</template>

<script setup>
import { ArrowUp } from '#solar-icons'
import * as solar from '#solar-icons/category'
</script>

Available aliases:

#solar-icons - Exports Vue components.
#solar-icons/lib - Exports utilities (e.g., SolarProvider, useSolar).
#solar-icons/category - Exports categorized icon sets.

Composition API

Read or update default settings dynamically:

<template>
    <div>
        <ArrowUp :size="iconSize" weight="Outline" />
        <button @click="increaseSize">Resize</button>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ArrowUp, useSolar } from '#solar-icons/lib'

const { config, setSize } = useSolar()
const iconSize = ref(24)

const increaseSize = () => {
    const newSize = parseInt(iconSize.value) + 4
    iconSize.value = newSize
    setSize(newSize)
}
</script>

Props

Icon components accept standard SVG attributes alongside these props:

Prop	Type	Default	Description
`color`	`string`	`currentColor`	Sets the icon color.
`size`	`string \| number`	`24`	Sets width and height.
`weight`	`'Bold' \| 'Linear' \| 'Outline' \| 'BoldDuotone' \| 'LineDuotone' \| 'Broken'`	`Linear`	Sets icon style.
`mirrored`	`boolean`	`false`	Flips the icon horizontally if `true`.
`alt`	`string`	`undefined`	Accessibility title.