Getting Started
Registry Icone
Preset PrimeIcons, Lucide, Font Awesome e override personalizzato delle categorie.
Preset disponibili
La libreria espone tre preset completi, accessibili via la mappa iconPresets o per nome:
| Preset | Export | Identificatore | CDN/Pacchetto richiesto |
|---|---|---|---|
| PrimeIcons (default) | defaultIcons | 'primeicons' | primeicons |
| Lucide | lucideIcons | 'lucide' | lucide-static (classi icon-*) |
| Font Awesome 6 | fontAwesomeIcons | 'fontawesome' | Font Awesome Free/Pro |
import { defaultIcons, lucideIcons, fontAwesomeIcons, iconPresets } from '@pzeta/vue-widget'
// Accesso diretto
const editIcon = defaultIcons.actions.edit // 'pi pi-pencil'
const lucideEdit = lucideIcons.actions.edit // 'icon-pencil'
const faEdit = fontAwesomeIcons.actions.edit // 'fa-solid fa-pencil'
// Lookup dinamico
const preset = iconPresets['lucide']
Categorie — WidgetIcons
L'oggetto icone e organizzato in sei categorie tematiche:
| Categoria | Tipo | Esempi di icone |
|---|---|---|
actions | ActionIcons | edit, delete, add, details, share, options, refresh, download, assign, view, search |
trend | TrendIcons | up, down, trendUp, trendDown |
navigation | NavigationIcons | chevronDown, chevronRight, arrowRight |
status | StatusIcons | loading, empty, flag, users, inbox, error, retry |
data | DataIcons | send |
theme | ThemeIcons | sun, moon |
Override parziale tramite plugin
app.use(PzetaWidgetPlugin, {
iconPreset: 'lucide',
icons: {
actions: { edit: 'icon-pencil-line', delete: 'icon-trash' },
status: { loading: 'icon-loader-circle animate-spin' },
},
})
Il deepMerge interno preserva tutte le icone non specificate, sovrascrivendo solo quelle elencate.
API runtime — initIcons / resetIcons
import { initIcons, resetIcons } from '@pzeta/vue-widget'
// Inizializza con override partendo dai default (utile in scenari custom)
const icons = initIcons({
actions: { edit: 'my-edit-icon' },
})
// Reset stato globale icone (utile nei test)
resetIcons()
initIcons non installa il plugin: ritorna solo l'oggetto merged, da passare poi a un setup manuale o test harness.
Switch a runtime via useIcon
import { useIcon } from '@pzeta/vue-widget'
const { switchIconSet, setIcons, getCurrentPreset } = useIcon()
switchIconSet('fontawesome')
setIcons({ actions: { edit: 'fa-solid fa-pen-to-square' } })
console.log(getCurrentPreset()) // 'fontawesome'
Vedi Composables — Chart, Icon e i18n per i dettagli completi del composable.