iconify

Iconify és una llibreria que proporciona accés fàcil a milers d'icones d'una gran varietat de col·leccions, tot en un sol paquet. És molt popular perquè ofereix una manera eficient d'integrar icones en llocs web i aplicacions amb diverses opcions de càrrega (JS, SVG o component per frameworks). A més, està optimitzada per rendiment i compatibilitat.

Característiques principals d'Iconify

1. Accés a moltes col·leccions d'icones: Ofereix més de 100 col·leccions d'icones (com Material Design, FontAwesome, Tabler, entre d'altres).
2. Compatibilitat multiplataforma: Pot utilitzar-se amb HTML, frameworks com Vue.js, React, Angular, i sistemes com WordPress.
3. Opcions de càrrega:
   • Icones basades en JS: Utilitza un script que carrega les icones automàticament.
   • SVG pur: Pots inserir icones com a codi SVG estàtic o dinàmic.
   • Components de frameworks: Proporciona suport per a React, Vue, Svelte i altres frameworks.
4. Optimització de rendiment: Inclou tècniques com la memòria cau i l'ajust automàtic de la mida per garantir una càrrega ràpida.
5. Personalització: Pots modificar color, mida i altres atributs fàcilment mitjançant classes CSS o configuracions dinàmiques.

Com utilitzar Iconify amb HTML i JavaScript

1. Carrega Iconify al teu projecte

Inclou aquest script a l'HTML:

html
Copia el codi<script src="https://code.iconify.design/iconify.min.js"></script>

2. Inserir icones amb el codi JavaScript

Utilitza el nom de l'icona per carregar-la. Exemple:

html
Copia el codi<span class="iconify" data-icon="mdi:home" data-inline="false"></span>

Això mostrarà la icona de casa de la col·lecció Material Design Icons (mdi).

3. Personalitzar les icones

Pots ajustar la mida i el color mitjançant CSS:

html
Copia el codi<span class="iconify" data-icon="mdi:home" data-inline="false" style="color: blue; font-size: 48px;"></span>

Com utilitzar Iconify amb SVG pur

Si prefereixes utilitzar SVG directament (sense carregar JavaScript), pots fer-ho així:

1. Descarrega un SVG des d'Iconify

Visita Iconify Explorer i copia el codi SVG de l'icona que vols.

2. Inserir el codi SVG

Afegeix l'SVG al teu HTML:

html
Copia el codi<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
    <path fill="blue" d="M12 2L20 9H16V20H8V9H4L12 2Z" />
</svg>

Avantatges de Iconify

• Gran varietat d'icones: És ideal si vols accedir a moltes col·leccions sense instal·lar múltiples paquets.
• Fàcil d'integrar: Tant si utilitzes HTML estàtic com frameworks moderns.
• Rendiment optimitzat: Inclou mecanismes per carregar només el que necessites.

Si estàs treballant amb UIKit 3 o algun projecte de WordPress, Iconify es pot integrar sense problemes i t'ofereix molta flexibilitat per enriquir la interfície del teu lloc web o aplicació.