Использование @nuxt/icon в Nuxt 3

@nuxt/icon — это официальный модуль для работы с иконками в Nuxt 3, который предоставляет удобный доступ к тысячам иконок из Iconify и поддерживает загрузку кастомных SVG. В этой статье разберём, как его настроить и использовать.

1. Установка и подключение

Установка

npm install @nuxt/icon
# или
yarn add @nuxt/icon
# или
pnpm add @nuxt/icon

Подключение в nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
})

2. Использование иконок

Модуль предоставляет компонент <Icon />, который поддерживает:

• Иконки из Iconify (формат [коллекция]:[название]).
• Собственные SVG из папки assets/icons.

Примеры

<template>
  <!-- Иконки из Iconify -->
  <Icon name="mdi:home" />       <!-- Material Design Icons -->
  <Icon name="fa6-solid:user" /> <!-- FontAwesome 6 -->
  <Icon name="logos:nuxt" />     <!-- Логотип Nuxt.js -->

  <!-- Собственные SVG (лежат в ~/assets/icons/) -->
  <Icon name="logo.svg" />       <!-- Файл: assets/icons/logo.svg -->
</template>

3. Настройка модуля

Базовая конфигурация

export default defineNuxtConfig({
  modules: ['@nuxt/icon'],
  icon: {
    // Размер по умолчанию (можно переопределить в компоненте)
    size: '24px',
    // Псевдонимы для часто используемых иконок
    aliases: {
      'home': 'mdi:home',
      'user': 'fa6-solid:user',
    },
    // Загрузить только нужные коллекции Iconify (оптимизация)
    collections: ['mdi', 'fa6-solid'],
  },
})

Кастомные коллекции SVG (customCollections)

Если нужно загружать SVG из другой папки (не assets/icons), можно указать customCollections:

export default defineNuxtConfig({
  icon: {
    customCollections: [
      {
        prefix: 'svg', // Префикс для обращения (например, `svg:my-icon`)
        dir: './assets/custom-icons', // Путь к папке с SVG
      },
    ],
  },
})

Пример использования:

<Icon name="svg:my-icon" /> <!-- Будет искать в `assets/custom-icons/my-icon.svg` -->

4. Дополнительные возможности

Динамические иконки

<script setup>
const iconName = ref('mdi:home')
</script>

<template>
  <Icon :name="iconName" />
</template>

Размер и цвет

<Icon name="mdi:github" size="32" color="#ff0000" />

CSS-классы и анимации

<Icon name="mdi:alert" class="text-red-500 hover:scale-110 transition" />

5. Где искать иконки?

• Iconify Explorer — база 150k+ иконок.
• Популярные коллекции:
• mdi (Material Design Icons)
• fa6 (FontAwesome 6)
• carbon (IBM Carbon)
• lucide (аналог Feather Icons)

6. Оптимизация

• Модуль автоматически tree-shake’ит неиспользуемые иконки.
• Можно ограничить загрузку только нужных коллекций (collections в конфиге).

Заключение

@nuxt/icon — это мощный и удобный инструмент для работы с иконками в Nuxt 3. Он поддерживает:
✅ Иконки из Iconify
✅ Собственные SVG
✅ Динамическую подгрузку
✅ Оптимизацию сборки

Настроить его можно всего в несколько строк, а гибкость конфигурации позволяет адаптировать модуль под любые нужды.

→ Документация @nuxt/icon

Если остались вопросы — спрашивайте в комментариях! 🚀