아이콘 (Icons)

Iconify (이코니아)
Nuxt UI는 Iconify와 통합되어 200,000개 이상의 아이콘에 액세스합니다.

사용법

Nuxt UI는 [@iconify/vue](https://iconify.design/docs/icon-components/vue/xph08x로 지원되는 Icon 구성 요소를 제공하므로 추가 설정이 필요하지 않습니다.

Icon 구성요소

Icon 구성 요소를 name prop과 함께 사용하여 아이콘을 표시할 수 있습니다.

<template>
  <UIcon name="i-lucide-lightbulb" class="size-5" />
</template>
https://iconify.design 컬렉션에 있는 모든 이름을 사용할 수 있습니다. https://icones.js.org에서 쉽게 찾아보거나 search-icons MCP 도구를 사용하여 AI 어시스턴트에서 직접 검색할 수 있습니다.
대시(-)가 있는 컬렉션을 사용할 때는 아이콘 이름과 콜론(:)을 사용하여 컬렉션 이름을 구분해야 합니다. @iconify/vue는 @nuxt/icon와 같이 이 경우를 처리하지 않습니다. 예를 들어 i-simple-icons-github 대신 i-simple-icons:github 또는 simple-icons:github를 작성해야 합니다.Iconify 명명 규칙 에 대해 자세히 알아보십시오.

Component 소품

일부 컴포넌트에는 icon prop이 있어 아이콘을 표시할 수 있습니다. 예를 들어 Button와 같이 다음과 같습니다.

<template>
  <UButton icon="i-lucide-sun" variant="subtle">Button</UButton>
</template>

Collections 파일 목록

Iconify 데이터세트

다음과 같이 아이콘 데이터를 로컬에 설치하는 것이 좋습니다.

pnpm i @iconify-json/{collection_name}

예를 들어, i-lucide-lightbulb 아이콘을 사용하려면 @iconify-json/lucide를 사용하여 컬렉션을 설치합니다.

모음을 설치하면 Nuxt UI가 사용하는 아이콘을 빌드에 포함할 수 있으므로 SSR 중에 즉시 렌더링하고 런타임 시 Iconify API에서 가져오는 대신 완전히 오프라인으로 작동합니다. 기본적으로 lucide 모음에서 Nuxt UI 자체 아이콘에 대해 자동으로 발생합니다.

재정의하거나 앱의 다른 곳에서 사용하는 아이콘과 같은 다른 아이콘을 번들로 만들려면 vite.config.ts의 icon.clientBundle.icons 옵션에 추가합니다.To bundle other icons, such as one you override or use elsewhere in your app, add them to the icon.clientBundle.icons option in your vite.config.ts:

vite.config.ts
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          icons: ['lucide:heart', 'simple-icons:github']
        }
      }
    })
  ]
})
i-{collection}-{name} 또는 {collection}:{name} 양식(예: i-lucide-heart 또는 lucide:heart) 및 i-material-symbols-menu 또는 material-symbols:menu)을 사용할 수 있습니다. @iconify-json/{collection_name}로 참조하는 각 컬렉션을 설치합니다.

사용하는 아이콘을 하나씩 나열하지 않고 번들로 사용하려면 scan를 사용하도록 설정합니다. @nuxt/icon의 clientBundle.scan와 같은 방식으로 설치된 모음에서 아이콘 사용을 소스에서 검색하여 번들로 만듭니다.

vite.config.ts
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          scan: true
        }
      }
    })
  ]
})

스캔은 오직 .vue, .jsx, .tsx, .md, .mdc, .mdx, .yml 및 .yaml 파일만 읽으며 문자 문자열로 작성된 아이콘 이름과 일치합니다. .ts 또는 .js 파일에 정의된 아이콘은 탐색 링크 목록처럼 누락되고 누락됩니다. 은 i-lucide-${name}와 같이 동적으로 빌드된 이름입니다. globInclude를 설정하여 파일을 스캔합니다. 기본 목록을 대체하므로 필요한 확장 기능을 유지합니다.

vite.config.ts
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    ui({
      icon: {
        clientBundle: {
          scan: {
            globInclude: ['**/*.{vue,jsx,tsx,md,mdc,mdx,yml,yaml,ts,js}']
          }
        }
      }
    })
  ]
})

동적 이름은 빌드 시 전체 집합을 알고 있는 경우에도 clientBundle.icons에 나열하여 번들로 사용할 수 있습니다. API에서 제공되는 아이콘처럼 런타임에만 존재하는 이름은 전혀 번들로 제공되지 않으며 필요에 따라 Iconify API에서 로드됩니다.

모음이 설치되지 않은 아이콘은 실행 시 Iconify API에서 로드되므로 @iconify-json/{collection_name}와 함께 사용하는 각 모음을 설치합니다. 번들링을 완전히 해제하려면 icon.clientBundle를 false로 설정하십시오.

Theme (## 테마)

vite.config.ts에서 Nuxt UI 구성 요소에 사용되는 기본 아이콘을 변경할 수 있습니다.

app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      arrowDown: 'i-lucide-arrow-down',
      arrowLeft: 'i-lucide-arrow-left',
      arrowRight: 'i-lucide-arrow-right',
      arrowUp: 'i-lucide-arrow-up',
      caution: 'i-lucide-circle-alert',
      check: 'i-lucide-check',
      chevronDoubleLeft: 'i-lucide-chevrons-left',
      chevronDoubleRight: 'i-lucide-chevrons-right',
      chevronDown: 'i-lucide-chevron-down',
      chevronLeft: 'i-lucide-chevron-left',
      chevronRight: 'i-lucide-chevron-right',
      chevronUp: 'i-lucide-chevron-up',
      close: 'i-lucide-x',
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check',
      dark: 'i-lucide-moon',
      drag: 'i-lucide-grip-vertical',
      ellipsis: 'i-lucide-ellipsis',
      error: 'i-lucide-circle-x',
      external: 'i-lucide-arrow-up-right',
      eye: 'i-lucide-eye',
      eyeOff: 'i-lucide-eye-off',
      file: 'i-lucide-file',
      folder: 'i-lucide-folder',
      folderOpen: 'i-lucide-folder-open',
      hash: 'i-lucide-hash',
      info: 'i-lucide-info',
      light: 'i-lucide-sun',
      loading: 'i-lucide-loader-circle',
      menu: 'i-lucide-menu',
      minus: 'i-lucide-minus',
      panelClose: 'i-lucide-panel-left-close',
      panelOpen: 'i-lucide-panel-left-open',
      plus: 'i-lucide-plus',
      reload: 'i-lucide-rotate-ccw',
      search: 'i-lucide-search',
      stop: 'i-lucide-square',
      star: 'i-lucide-star',
      success: 'i-lucide-circle-check',
      system: 'i-lucide-monitor',
      tip: 'i-lucide-lightbulb',
      upload: 'i-lucide-upload',
      warning: 'i-lucide-triangle-alert'
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        icons: {
          arrowDown: 'i-lucide-arrow-down',
          arrowLeft: 'i-lucide-arrow-left',
          arrowRight: 'i-lucide-arrow-right',
          arrowUp: 'i-lucide-arrow-up',
          caution: 'i-lucide-circle-alert',
          check: 'i-lucide-check',
          chevronDoubleLeft: 'i-lucide-chevrons-left',
          chevronDoubleRight: 'i-lucide-chevrons-right',
          chevronDown: 'i-lucide-chevron-down',
          chevronLeft: 'i-lucide-chevron-left',
          chevronRight: 'i-lucide-chevron-right',
          chevronUp: 'i-lucide-chevron-up',
          close: 'i-lucide-x',
          copy: 'i-lucide-copy',
          copyCheck: 'i-lucide-copy-check',
          dark: 'i-lucide-moon',
          drag: 'i-lucide-grip-vertical',
          ellipsis: 'i-lucide-ellipsis',
          error: 'i-lucide-circle-x',
          external: 'i-lucide-arrow-up-right',
          eye: 'i-lucide-eye',
          eyeOff: 'i-lucide-eye-off',
          file: 'i-lucide-file',
          folder: 'i-lucide-folder',
          folderOpen: 'i-lucide-folder-open',
          hash: 'i-lucide-hash',
          info: 'i-lucide-info',
          light: 'i-lucide-sun',
          loading: 'i-lucide-loader-circle',
          menu: 'i-lucide-menu',
          minus: 'i-lucide-minus',
          panelClose: 'i-lucide-panel-left-close',
          panelOpen: 'i-lucide-panel-left-open',
          plus: 'i-lucide-plus',
          reload: 'i-lucide-rotate-ccw',
          search: 'i-lucide-search',
          stop: 'i-lucide-square',
          star: 'i-lucide-star',
          success: 'i-lucide-circle-check',
          system: 'i-lucide-monitor',
          tip: 'i-lucide-lightbulb',
          upload: 'i-lucide-upload',
          warning: 'i-lucide-triangle-alert'
        }
      }
    })
  ]
})

Components

Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.

Color Mode

Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.