Icon

Wrapper @nuxt/icon untuk ikon dari berbagai koleksi Iconify, dengan ukuran, mode render, dan atribut aksesibilitas.

Dasar

Gunakan nama lengkap collection:name. Ikon dekoratif otomatis disembunyikan dari pembaca layar; beri aria-label bila ikon menyampaikan makna sendiri.

Sampah terpilah

Berbagai koleksi

Lucide, Material Design Icons, Tabler, dan koleksi Iconify lainnya dapat dipakai tanpa memasang paket koleksinya. Koleksi yang tidak tersedia lokal dimuat lewat API Iconify dan membutuhkan koneksi jaringan.

Lucide

Material Design Icons

Tabler

Logo berwarna

Ukuran dan warna

Default 24 px. Angka atau string angka dianggap piksel; string satuan CSS seperti 2rem juga didukung. Ikon monokrom mengikuti warna teks, sehingga bisa memakai class token seperti text-success-text.

Mode SVG dan CSS

Mode SVG adalah default, mengikuti wrapper dashboard ERP dan mendukung ikon berwarna. Mode CSS memakai span dengan mask/background, berguna untuk ikon monokrom yang ukurannya diatur lewat class.

SVG (default)

CSS

Ikon dinamis

Nama ikon dapat berubah saat aplikasi berjalan. Contoh ini berpindah dari Lucide ke MDI ketika item dipilih.

API

Props

Prop	Tipe	Default	Keterangan
name	string	—	Nama Iconify collection:name atau nama koleksi kustom aplikasi.
size	number \| string	24	Ukuran dalam piksel atau satuan CSS.
mode	'svg' \| 'css'	'svg'	Cara Nuxt Icon merender ikon.

Tidak ada slot atau event khusus. Atribut HTML, class, style, dan listener diteruskan ke Nuxt Icon. Custom collection tetap dikonfigurasi melalui icon.customCollections di nuxt.config.ts aplikasi.

Konfigurasi lengkap: Nuxt Icon. Cari nama ikon di katalog Iconify.