@solar-icons/nuxt

The Nuxt module for seamless integration of Solar Icons with auto-import and global configuration.

The @solar-icons/nuxt package provides a specialized Nuxt module for integrating Solar icons into your Nuxt 3+ applications. This module acts as a wrapper around @solar-icons/vue, offering auto-import capabilities, global configuration, and optimized performance specifically designed for the Nuxt ecosystem.

nuxi module add @solar-icons/nuxt

Key Features

Auto-import Icons: All icons are automatically available as components with a configurable prefix
Global Configuration: Set default styles for all icons through module configuration
Optimized for Nuxt: Built specifically for Nuxt 3 with SSR support and performance optimizations
TypeScript Support: Full TypeScript support with proper type definitions
Flexible Usage: Supports both auto-imported components and manual imports via aliases
Runtime Configuration: Access and modify icon configurations at runtime

Configuration

Configure the module in your nuxt.config.ts file:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@solar-icons/nuxt'],
  solarIcons: {
    // Prefix for auto-imported components (default: 'Solar')
    namePrefix: 'Solar',
    // Auto-import all icons as components (default: true)
    autoImport: true,
    // Inject global provider automatically (default: true)
    provider: true,
    // Default icon properties
    color: 'currentColor',
    size: 24,
    weight: 'Linear',
    mirrored: false,
  },
})

Usage

Auto-imported Icons

With auto-import enabled (default), you can use any Solar icon directly in your templates without manual imports:

<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 Import via Aliases

For more control, you can manually import icons using the provided aliases:

<template>
  <div>
    <ArrowUp :size="24" weight="Outline" />
    <solar.Arrows.ArrowDown :size="32" weight="BoldDuotone" />
    <Arrows.AltArrowLeft color="#fff" weight="Bold" />
  </div>
</template>

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

Global Configuration with SolarProvider

The module automatically provides a global configuration context. You can override these defaults using the SolarProvider component:

<template>
  <SolarProvider :size="32" color="purple" weight="Linear">
    <YourComponents />
  </SolarProvider>
</template>

<script setup>
import { SolarProvider } from '#solar-icons/lib'
</script>

Using Composition API

Access and modify icon configurations using the Composition API:

<template>
  <div>
    <ArrowUp :size="iconSize" weight="Outline" />
    <button @click="increaseSize">Increase Size</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>

Configuration Options

The module offers the following configuration options in your nuxt.config.ts:

Option	Type	Default	Description
`namePrefix`	string	`'Solar'`	Prefix for auto-imported components
`autoImport`	boolean	`true`	Auto-import all icons as components
`provider`	boolean	`true`	Inject global provider automatically
`color`	string	`'currentColor'`	Default icon color
`size`	number \| string	`24`	Default icon size
`weight`	string	`'Linear'`	Default icon style
`mirrored`	boolean	`false`	Default horizontal flip state

Available Aliases

The module provides these import aliases for convenience:

#solar-icons - Exports all icons and components from @solar-icons/vue
#solar-icons/lib - Exports library utilities like SolarProvider, useSolar
#solar-icons/category - Exports categorized icon collections

Component Props

Each icon component accepts the following props, in addition to all standard SVG attributes:

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

Compatibility

This module is compatible with:

Nuxt 3.0.0 and higher
Node.js 18.0.0 and higher
Vue 3.0.0 and higher

On this page