The icon component uses Nuxt Icon under the hood. Check out the usage guide from Nuxt Icon.
:icon{name="lucide:box"}
:icon{name="vscode-icons:file-type-js-official"}
:icon{name="vscode-icons:file-type-vue"}
:icon{name="vscode-icons:file-type-nuxt" size="30"}
If you want to use other icons, it is highly recommended to install them locally, which is faster and more reliable on both SSR and client-side.
Terminal
npm i -D @iconify-json/collection-name
@iconify-json/lucide and @iconify-json/vscode-icons are installed by default.
0.5.3
You can put iconify icons, emojis and urls in smart-icon. Smart icon will render them automatically.
Iconify
Emojis
πππ
URL
**Iconify**
:smart-icon{name="lucide:box"}
:smart-icon{name="vscode-icons:file-type-js-official"}
:smart-icon{name="vscode-icons:file-type-vue"}
**Emojis**
:smart-icon{name="π"}
:smart-icon{name="π"}
:smart-icon{name="π" size=30}
**URL**
:smart-icon{name="/logo.svg"}
:smart-icon{name="https://vueuse.org/favicon.svg" size=40}
