[ Nuxt ] nuxt/icon 사용하기 (iconify | 로컬 데이터셋)

Icon · Nuxt Modules

 

기본 세팅

설치

npm i -D @nuxt/icon

 

nuxt.config.ts

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

 

 

 

사용 방법

1. Iconify provider 사용

export default defineNuxtConfig({
  icon: {
    size: '14px',
    class: 'icon',
    mode: 'svg',
    provider: 'iconify'
  },
});

provider를 iconify로 하면 별도의 데이터셋을 프로젝트에 저장할 필요 없이 iconify의 모든 아이콘을 사용할 수 있다.

 

<Icon name="mdi:calendar-blank-outline" />

• 사용 방법: icon set 이름: icon

 

 

2. Icon Dataset 등록

사용할 아이콘 셋의 JSON 파일을 로컬에 install

이 방법을 아주 권장하더라

npm i -D @iconify-json/collection-name

 

Icônes

여기서 원하는 Icon set 찾기

 

Material Symbols가 지원하는 아이콘 수가 압도적으로 많기 때문에 얘로 택

npm i -D @iconify-json/material-symbols

export default defineNuxtConfig({
  icon: {
    size: '14px',
    class: 'icon',
    mode: 'svg',
    serverBundle: {
      collections: ['material-symbols'],
    },
  },
});

serverBundle은 굳이 안 써줘도 기본으로 server bundle mode가 local이기 때문에 local에 install된 아이콘 셋은 알아서 찾아준다.

그래도 명시적으로 써줬다. 

 

빌드할 때 이런 메시지 뜨면 잘 되고 있는 것임

 

 

 

 

자주 쓰는 아이콘은 등록해놓자 ⇒ aliases

• 동일한 아이콘 셋의 아이콘을 재사용
• 단축어 편함
• 일괄적으로 변경 가능

aliases: {
  calendar: 'material-symbols:calendar-today-outline',
},

// aliases를 icon name으로 사용
<Icon name="calendar" />

 

 

 

만약 경고 메시지가 뜬다면?

@iconify-json/collection-name이 잘 install 됐는지 확인하자 !