Aller au contenu

Aperçu des packs Iconify

Plusieurs packs d’icônes Iconify sont disponibles sous forme de packages npm avec les composants Icon d’Astro. Chaque pack possède son propre import et utilise la même API basée sur name.

PackPréfixeIcônesStyleIdéal pourPage
Material Designmdi7 638Rempli + contourUsage général, couverture la plus largeMaterial Design
Carboncarbon2 582ContourDesign entreprise/IBM, lignes épuréesCarbon
Phosphorph9 161Poids multiplesOptions de poids flexibles (fin à rempli)Phosphor
Tablertabler6 034Basé sur les traitsIcônes linéaires nettes, trait uniformeTabler

Chaque pack possède son propre composant Icon.astro :

---
import MdiIcon from '@f5-sales-demo/icons-mdi/Icon.astro';
import CarbonIcon from '@f5-sales-demo/icons-carbon/Icon.astro';
import PhIcon from '@f5-sales-demo/icons-phosphor/Icon.astro';
import TablerIcon from '@f5-sales-demo/icons-tabler/Icon.astro';
---
<MdiIcon name="database" />
<CarbonIcon name="cloud" />
<PhIcon name="globe" />
<TablerIcon name="shield" />

Les icônes sont rendues en tant que SVG en ligne utilisant currentColor — elles s’adaptent automatiquement aux modes clair et sombre.

  • Couverture la plus large : Material Design Icons possède le plus grand nombre d’icônes (7 638) avec des variantes remplies et en contour pour pratiquement tous les cas d’utilisation.
  • Design entreprise : Carbon suit le langage de design d’IBM avec des contours épurés et cohérents adaptés aux applications professionnelles.
  • Flexibilité des poids : Phosphor propose six variantes de poids (thin, light, regular, bold, fill, duotone) pour ajuster finement le poids visuel.
  • Traits uniformes : Tabler utilise une épaisseur de trait uniforme de 2px sur l’ensemble de ses 6 034 icônes pour un rendu cohérent.

Consultez la page dédiée de chaque pack pour les grilles d’icônes sélectionnées et les liens de navigation.