// Importation directe d'un fichier SVG comme un composant React import ImageSVG from '@/assets/images/mon_icone.svg'; // Utilisation du composant SVG importé function MonComposant() { return ( <div> <h1>Exemple d'utilisation d'un SVG</h1> <imagesvg></imagesvg> </div> ); } export default MonComposant; L'intégration de fichiers SVG en tant que composants React dans Next.js simplifie considérablement le processus de développement, éliminant la nécessité de configurations complexes souvent rencontrées dans d'autres environnements React. Next.js gère cette fonctionnalité nativement grâce à sa configuration Webpack intégrée, transformant automatiquement les fichiers SVG importés en composants React fonctionnnels.

Cette approche "prêt à l'emploi" permet aux développeurs de se concentrer davantage sur la logique applicative et l'expérience utilisateur, plutôt que sur la gestion des outils de build.

Fonctionnement Natif de Next.js pour les SVG

Lorsque vous utilisez une isntruction d'importation ES6 pour un fichier .svg dans votre projet Next.js, le processus de build analyse ce fichier. En coulisses, Next.js utilise une règle @svgr/webpack pour convertir le contenu SVG en un composant React. Cette transformation est transparente pour le développeur ; aucune configuration supplémentaire dans next.config.js n'est requise pour activer cette fonctionnalité de base.

Intégration d'un Composant SVG

Pour commencer, organisez vos fichiers SVG dans un répertoire dédié, par exemple assets/icons/. Ensuite, importez le fichier SVG directement dans votre composant React comme n'importe quel autre module.

Exemple de Structure de Projet :

```

my-next-app/ ├── assets/ │ └── icons/ │ └── logo.svg ├── src/ │ └── app/ │ └── page.tsx └── package.json

  

### Exemple d'Importation et d'Utilisation :

 
    ```

import LogoIcon from '@/assets/icons/logo.svg'; // Utilisation d'un alias de chemin

export default function AccueilPage() {
  return (
    <div>
      <h2>Bienvenue sur notre application</h2>
      {/* Utilisation du SVG comme un composant React standard */}
      <logoicon></logoicon>
    </div>
  );
}
    

Dans cet exemple, LogoIcon est maintenant un composant React fonctionnel. Vous pouvez l'intégrer directement dans votre JSX. L'alias de chemin @/ est généralement configuré dans jsconfig.json ou tsconfig.json pour pointer vers la racine du projet. Alternativement, un chemin relatif tel que ../../assets/icons/logo.svg peut être utilisé.

Contrôle et Personnalisation via les Props

La véritable puissance de cette approche réside dans le contrôle granulaire offert. Lorsqu'un SVG est transformé en composant React, ses attributs XML natifs sont mappés aux props du composant. Cela permet de manipuler dynamiquemetn les propriétés du SVG, telles que la couleur, la taille, ou même d'ajouter des gestionnaires d'événements.

Exemple de SVG Original :

```

  

### Exemple de Composant React avec Props :

 
    ```

import CercleSVG from '@/assets/icons/cercle.svg';

function ComposantAvecCouleur() {
  return (
    <div>
      {/* Utilisation du composant SVG avec des props personnalisées */}
      <cerclesvg cliqu="" console.log="" fill="green" height="{50}" onclick="{()" width="{50}"></cerclesvg>
      <cerclesvg fill="red"></cerclesvg> {/* Utilise les valeurs par défaut pour width/height */}
    </div>
  );
}

export default ComposantAvecCouleur;
    

Les props passées au composant CercleSVG (comme width, height, fill, et onClick) remplacent ou complètent les attributs définis dans le fichier SVG d'origine. Cette flexibilité permet de réutiliser les mêmes icônes dans différents contextes, en adaptant leur apparence et leur comportement selon les besoins. Les attributs SVG standard tels que viewBox, stroke, strokeWidth, etc., peuvent tous être contrôlés de cette manière.