Nuxt Icon : plus de 200 000 icônes pour vos applications Nuxt

Qu'est-ce que Nuxt Icon ?

Nuxt Icon est un module officiel Nuxt qui vous donne accès à plus de 200 000 icônes provenant de collections populaires comme Heroicons, Material Design Icons, Font Awesome, Tabler Icons, et bien d'autres. Le tout avec une intégration native dans Nuxt et des performances optimales.

Au lieu de télécharger et gérer manuellement des fichiers d'icônes ou d'installer de lourdes bibliothèques, Nuxt Icon vous permet d'utiliser n'importe quelle icône avec un simple composant Vue.

Pourquoi utiliser Nuxt Icon ?

Accès à +200 000 icônes

Nuxt Icon s'appuie sur Iconify, la plus grande collection d'icônes unifiée au monde :

• Heroicons : icônes modernes de Tailwind Labs
• Material Design Icons : bibliothèque Google
• Font Awesome : collection populaire pro et gratuite
• Tabler Icons : icônes élégantes et cohérentes
• Lucide : fork moderne de Feather Icons
• Et plus de 150 autres collections !

Performance optimale

• Chargement à la demande : seules les icônes utilisées sont chargées
• Format SVG natif : vectoriel pour une qualité parfaite à toutes les tailles
• Cache automatique : les icônes sont mises en cache pour des chargements ultra-rapides
• Bundle optimisé : pas de poids supplémentaire inutile

Intégration native Nuxt

• Auto-import du composant : pas besoin d'importer manuellement
• Support SSR : fonctionne parfaitement avec le Server-Side Rendering
• TypeScript : support complet avec auto-complétion
• Customisation facile : taille, couleur, classe CSS

Installation et configuration

Installation

npm install @nuxt/icon

Configuration dans nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxt/icon'
  ]
})

C'est tout ! Le composant <Icon> est maintenant disponible partout dans votre application.

Utilisation basique

Syntaxe simple

<template>
  <Icon name="heroicons:home" />
</template>

La syntaxe est collection:icon-name :

• heroicons:home → icône "home" de Heroicons
• mdi:account → icône "account" de Material Design Icons
• fa6-solid:heart → icône "heart" de Font Awesome 6 Solid

Personnalisation

<template>
  <!-- Taille personnalisée -->
  <Icon name="heroicons:star" size="24" />
  
  <!-- Couleur personnalisée -->
  <Icon name="heroicons:check-circle" class="text-green-500" />
  
  <!-- Combinaison taille + classe -->
  <Icon 
    name="heroicons:shield-check" 
    size="32"
    class="text-blue-600 hover:text-blue-700"
  />
</template>

Exemples concrets

Navigation avec icônes

<template>
  <nav class="flex gap-4">
    <NuxtLink to="/" class="flex items-center gap-2">
      <Icon name="heroicons:home" size="20" />
      <span>Accueil</span>
    </NuxtLink>
    
    <NuxtLink to="/blog" class="flex items-center gap-2">
      <Icon name="heroicons:newspaper" size="20" />
      <span>Blog</span>
    </NuxtLink>
    
    <NuxtLink to="/contact" class="flex items-center gap-2">
      <Icon name="heroicons:envelope" size="20" />
      <span>Contact</span>
    </NuxtLink>
  </nav>
</template>

Boutons avec icônes

<template>
  <div class="flex gap-4">
    <!-- Bouton avec icône à gauche -->
    <button class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded">
      <Icon name="heroicons:plus" size="20" />
      <span>Ajouter</span>
    </button>
    
    <!-- Bouton avec icône à droite -->
    <button class="flex items-center gap-2 px-4 py-2 border rounded">
      <span>Télécharger</span>
      <Icon name="heroicons:arrow-down-tray" size="20" />
    </button>
    
    <!-- Bouton icône uniquement -->
    <button class="p-2 rounded-full hover:bg-gray-100">
      <Icon name="heroicons:cog-6-tooth" size="24" />
    </button>
  </div>
</template>

Cards avec icônes

<template>
  <div class="grid grid-cols-3 gap-4">
    <div class="p-6 border rounded-lg">
      <Icon name="heroicons:rocket-launch" size="32" class="text-blue-600 mb-3" />
      <h3 class="font-bold">Performance</h3>
      <p>Sites ultra-rapides</p>
    </div>
    
    <div class="p-6 border rounded-lg">
      <Icon name="heroicons:shield-check" size="32" class="text-green-600 mb-3" />
      <h3 class="font-bold">Sécurité</h3>
      <p>Protection optimale</p>
    </div>
    
    <div class="p-6 border rounded-lg">
      <Icon name="heroicons:sparkles" size="32" class="text-purple-600 mb-3" />
      <h3 class="font-bold">Design</h3>
      <p>Interface moderne</p>
    </div>
  </div>
</template>

Collections populaires

Heroicons (recommandé)

Collection officielle de Tailwind CSS, parfaite pour les interfaces modernes :

<Icon name="heroicons:check-circle" />
<Icon name="heroicons:x-circle" />
<Icon name="heroicons:information-circle" />
<Icon name="heroicons:exclamation-triangle" />

Variantes disponibles :

• heroicons:icon-name (outline, par défaut)
• heroicons-solid:icon-name (solid)
• heroicons-mini:icon-name (mini, 20x20)

Material Design Icons

Plus de 7000 icônes de Google :

<Icon name="mdi:account" />
<Icon name="mdi:email" />
<Icon name="mdi:phone" />
<Icon name="mdi:calendar" />

Lucide

Fork moderne de Feather Icons :

<Icon name="lucide:heart" />
<Icon name="lucide:star" />
<Icon name="lucide:bookmark" />
<Icon name="lucide:share-2" />

Tabler Icons

Plus de 4000 icônes cohérentes :

<Icon name="tabler:home" />
<Icon name="tabler:user" />
<Icon name="tabler:settings" />
<Icon name="tabler:logout" />

Rechercher des icônes

Pour trouver l'icône parfaite, utilisez :

1. Icônes : interface de recherche élégante avec prévisualisation
2. Iconify : catalogue complet de toutes les collections
3. VSCode Extension : Iconify IntelliSense pour l'auto-complétion

Utilisation dans mes projets

J'utilise Nuxt Icon sur tous mes projets Nuxt pour enrichir les interfaces :

Site de Céline Fretel

Pour le site de Maître Fretel, j'ai utilisé Heroicons pour :

• Les icônes de navigation (accueil, prestations, contact)
• Les points clés des services (bouclier pour sécurité juridique, balance pour justice)
• Les boutons d'action (téléphone, email)

Art Conseil

Sur Art Conseil, les icônes servent à :

• Illustrer les services (document, académie, engrenage)
• Enrichir les cards de fonctionnalités
• Améliorer les CTA (appel à l'action)

Avantages constatés

• Cohérence visuelle : toutes les icônes proviennent de la même collection
• Flexibilité : changement d'icône en quelques secondes
• Performance : pas d'impact sur la taille du bundle
• Maintenance : plus besoin de gérer des fichiers SVG manuellement

Configuration avancée

Personnalisation globale

// nuxt.config.ts
export default defineNuxtConfig({
  icon: {
    // Taille par défaut
    size: '24px',
    
    // Classe CSS par défaut
    class: 'icon',
    
    // Collections à charger
    collections: ['heroicons', 'mdi'],
    
    // Mode personnalisé
    mode: 'svg', // ou 'css'
  }
})

Icônes personnalisées

Vous pouvez aussi ajouter vos propres icônes SVG :

<Icon name="custom:logo" />

Configurez dans nuxt.config.ts :

export default defineNuxtConfig({
  icon: {
    customCollections: [
      {
        prefix: 'custom',
        dir: './assets/icons'
      }
    ]
  }
})

Bonnes pratiques

Choisir la bonne collection

• Heroicons : interfaces modernes, applications web
• Material Design : applications Google-like, Android
• Lucide : sites épurés, minimalistes
• Tabler : dashboards, admin panels

Cohérence visuelle

Utilisez principalement une seule collection par projet pour garantir une cohérence visuelle. Vous pouvez en combiner plusieurs pour des usages spécifiques (ex: réseaux sociaux).

Accessibilité

Ajoutez toujours un label accessible :

<button aria-label="Fermer le menu">
  <Icon name="heroicons:x-mark" />
</button>

Performance

Le chargement est déjà optimisé, mais vous pouvez :

• Limiter les collections dans la config
• Utiliser le même set d'icônes pour réduire les requêtes
• Privilégier les variantes "mini" quand les icônes sont petites

Comparaison avec d'autres solutions

Ressources

Documentation et outils

• Documentation Nuxt Icon : guide officiel
• Icônes : recherche d'icônes
• Iconify : toutes les collections
• VSCode Extension : auto-complétion

Articles connexes

• Nuxt : framework Vue.js pour applications performantes
• Nuxt UI Pro : composants premium (utilise Nuxt Icon)
• Vue.js : framework JavaScript de base
• Tailwind CSS : framework CSS souvent utilisé avec les icônes

Conclusion

Nuxt Icon est un module essentiel pour tout projet Nuxt. Avec +200 000 icônes accessibles via un simple composant, une performance optimale grâce au chargement à la demande, et une intégration native dans Nuxt, c'est la solution parfaite pour enrichir vos interfaces sans compromis.

Dernière mise à jour : Octobre 2025
Version : @nuxt/icon 1.x (dernière version stable)