아이콘 (Icons)
사용법
Nuxt UI는 자동으로 xph03x 모듈을 등록하므로 추가 설정이 필요하지 않습니다.
icon 구성 요소
Icon 구성 요소를 name prop과 함께 사용하여 아이콘을 표시할 수 있습니다.
<template>
<UIcon name="i-lucide-lightbulb" class="size-5" />
</template>search-icons MCP 도구를 사용하여 AI 어시스턴트에서 직접 검색할 수 있습니다.Component 소품
일부 컴포넌트에는 icon prop이 있어 아이콘을 표시할 수 있습니다. 예를 들어 Button와 같이 다음과 같습니다.
<template>
<UButton icon="i-lucide-sun" variant="subtle">Button</UButton>
</template>Collections 파일
Iconify 데이터 집합
다음과 같이 아이콘 데이터를 로컬에 설치하는 것이 좋습니다.
pnpm i @iconify-json/{collection_name}
yarn add @iconify-json/{collection_name}
npm install @iconify-json/{collection_name}
예를 들어, i-uil-github 아이콘을 사용하려면 @iconify-json/uil를 사용하여 컬렉션을 설치합니다. 이렇게 하면 로컬로 또는 서버가 없는 기능에서 아이콘을 제공할 수 있습니다. SSR 및 클라이언트측 모두에서 더 빠르고 안정적입니다.
또한 모음을 설치하면 Nuxt UI가 빌드 시 클라이언트 번들에 사용하는 아이콘을 포함할 수 있으므로 런타임 시 필요에 따라 로드되지 않고 첫 번째 렌더링 시 사용할 수 있습니다. 이 작업은 기본적으로 lucide 모음에서 Nuxt UI의 고유 아이콘에 대해 자동으로 발생합니다. 재정의하거나 응용 프로그램의 다른 곳에서 사용하는 아이콘과 같은 다른 아이콘을 번들로 만들려면 nuxt.config.ts의 clientBundle.icons 옵션에 추가합니다.
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
icon: {
clientBundle: {
icons: ['lucide:heart', 'simple-icons:github']
}
}
})
또는 clientBundle.scan를 활성화하여 소스를 스캔하여 앱 전체에서 사용되는 모든 아이콘을 번들로 묶어 하나씩 나열할 필요가 없습니다.
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
icon: {
clientBundle: {
scan: true
}
}
})
스캔은 오직 .vue, .jsx, .tsx, .md, .mdc, .mdx, .yml 및 .yaml 파일만을 읽으며, 문자 문자열로 쓰여진 아이콘 이름만 일치합니다. .ts 또는 .js 파일에 정의된 아이콘은 탐색 링크 목록처럼 누락되고, 누락됩니다. 은 i-lucide-${name}와 같이 동적으로 빌드된 이름입니다. globInclude를 설정하여 파일도 스캔합니다. 기본 목록을 대체하므로 필요한 확장자를 그대로 유지합니다.
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
icon: {
clientBundle: {
scan: {
globInclude: ['**/*.{vue,jsx,tsx,md,mdc,mdx,yml,yaml,ts,js}']
}
}
}
})
동적 이름은 빌드 시 전체 집합을 알고 있는 경우에도 clientBundle.icons에 나열하여 번들로 사용할 수 있습니다. API에서 오는 아이콘처럼 런타임에만 존재하는 이름은 번들로 제공되지 않습니다. 이러한 이름은 앱이 서버 렌더링될 때 /api/_nuxt_icon 경로에서 로드되고 Iconify API를 대체 기능으로 사용하며 nuxt generate 또는 x14x를 사용할 때 직접 Iconify API에서 로드됩니다.
사용자 정의 로컬 모음
로컬 SVG 파일을 사용하여 사용자 정의 Iconify 컬렉션을 만들 수 있습니다.
예를 들어, 아이콘의 SVG 파일을 선택한 폴더 아래에 놓습니다(예: ./app/assets/icons:
assets/icons
├── add.svg
└── remove.svg
nuxt.config.ts에서 icon.customCollections의 항목을 추가합니다.
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
icon: {
customCollections: [{
prefix: 'custom',
dir: './app/assets/icons'
}]
}
})
다음과 같이 아이콘을 사용할 수 있습니다.You can use the icons like this:
<template>
<UIcon name="i-custom-add" />
</template>
Theme (## 테마)
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'
}
}
})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'
}
}
})
]
})