useIcons

Setiap ikon internal yang dirender pustaka ini sendiri - spinner loading milik button, glyph remove milik chip, chevron dropdown milik select, ikon success/danger milik toast, dan seterusnya - di-resolve dari satu registry tujuan semantik, useIcons(), alih-alih di-hardcode per komponen. Prop name yang Anda atur sendiri (icon milik SButton, icon milik SInput, ...) tidak terpengaruh - registry ini hanya untuk ikon yang dirender komponen sendiri.

Penggunaan

Gantikan key apa pun secara global di app.config.ts:

export default defineAppConfig({
  selaras: {
    icons: {
      close: 'lucide:x',
      loading: 'lucide:loader-2',
    },
  },
})

Hanya key yang Anda atur yang digantikan; sisanya mempertahankan default Hugeicons-nya. Ini mengubah setiap komponen yang menggunakan key itu sekaligus - mengatur close me-reskin ikon dismiss pada Modal, Toast, tombol clear milik Input, dan tombol remove milik Chip sekaligus, alih-alih membutuhkan override terpisah untuk masing-masing.

Registry

API

function useIcons(): ComputedRef<IconRegistry>

Mengembalikan registry gabungan (override app.config.selaras.icons Anda diterapkan di atas default Hugeicons di atas) - gunakan ini jika Anda membangun komponen sendiri dan ingin ia menghormati override yang sama yang sudah diatur consumer, alih-alih meng-hardcode nama ikon langsung:

<script setup lang="ts">
const icons = useIcons()
</script>

<template>
  <SIcon :name="icons.close" />
</template>