Nuxt Icon / Iconify 사용법

1. 해당 링크(NuxtIcon)에서 nuxt3의 nuxtIcon 모듈을 설치한다

2. 아래 처럼 사용 가능하다 ( npm의 패키지에 해당 아이콘셋이 설치되어있어야함 )

사용 예
<Icon name="uil:github" />

아이콘셋 설치 예
"@iconify-json/carbon": "1.1.20", 
"@iconify-json/ic": "1.1.14", // 이건 머리리얼 아이콘
"@iconify-json/ph": "1.1.6",
"@iconify-json/twemoji": "1.1.12",

3. 아이콘의 종류는 해당 링크(Iconify)에서 선택해서 사용할수있다 (위의 uil:github등..)

4. Google Material Icons이나 Carbon등의 다양한 아이콘 셋이 준비되어있다 해당되어있다

5. 예를 들어 위의 uil:github는 해당 링크의 아이콘셋에 속해있다

6. 위의 아이콘을 VSCODE의 소스코드에서 확인하기 위해선 VScode의 플러그인(antfu.iconify)를 설치하면 좋다

.vscode/extensions.json폴더에 아래와 같이 적어줌으로써 프로젝트에 vscode플러그인 설치를 권장할수있다
{
  "recommendations": [
    "antfu.iconify" // 이 플러그인임
   ]
}

7.Iconify사이트에서 아이콘을 검색하면 좋지만 아래의 사이트에서 검색하는게 조금더 편하다

Icones