Key Takeaways

React offre quatre méthodes principales d'import SVG : import image, SVG inline, composants SVGR et imports dynamiques
SVGR avec la configuration webpack de Next.js offre le meilleur équilibre entre expérience développeur et contrôle à l'exécution
Les composants d'icônes réutilisables avec des props TypeScript (size, color, className) gardent votre code DRY
Framer Motion s'intègre nativement avec les éléments SVG pour les animations de tracés et formes basées sur les ressorts
Ajoutez toujours aria-label ou aria-hidden aux icônes SVG pour l'accessibilité des lecteurs d'écran

SVG dans le Développement React Moderne

Les SVG sont essentiels pour les applications React modernes, offrant des graphiques nets à n'importe quelle échelle. Ce guide couvre chaque méthode d'utilisation des SVG dans les projets React et Next.js.

Utilisation de composants SVG dans les applications React et Next.js — SVG dans React : des imports simples aux systèmes d'icônes animées et accessibles

Méthodes d'Import

1. Import Image Standard

Approche la plus simple :

jsx

import logo from './logo.svg';

function Header() {
  return <img src={logo} alt="Logo" className="logo" />;
}

Avantages : Simple, familier
Inconvénients : Pas d'accès au style/manipulation

2. Composants SVG Inline

Contrôle total :

jsx

function Icon() {
  return (
    <svg viewBox="0 0 24 24" className="icon">
      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5"/>
    </svg>
  );
}

Avantages : Accès complet CSS/JS
Inconvénients : Verbeux, difficile de changer la source

3. SVGR (Composant React)

Importer comme composant :

jsx

import { ReactComponent as Logo } from './logo.svg';

function Header() {
  return <Logo className="logo" fill="currentColor" />;
}

Avantages : Le meilleur des deux mondes
Inconvénients : Nécessite une configuration

4. Import Dynamique

Pour le code splitting :

jsx

import dynamic from 'next/dynamic';

const DynamicIcon = dynamic(() => import('./icons/chart.svg'));

function Dashboard() {
  return <DynamicIcon />;
}

Pro Tip: Pour la plupart des projets React, SVGR est l'approche recommandée. Elle vous permet d'importer des SVG comme composants React avec un support complet des props tout en gardant les fichiers SVG séparés pour une édition facile dans les outils de design.

Configuration SVGR

Configuration Next.js

javascript

// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

Avec Fallback URL

javascript

// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: /\.[jt]sx?$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            svgoConfig: {
              plugins: [{
                name: 'removeViewBox',
                active: false
              }]
            }
          }
        },
        'url-loader'
      ],
    });
    return config;
  },
};

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

Patterns de Composants

Composant d'Icône Réutilisable

jsx

interface IconProps {
  name: string;
  size?: number;
  color?: string;
  className?: string;
}

export function Icon({ name, size = 24, color = 'currentColor', className }: IconProps) {
  return (
    <svg
      width={size}
      height={size}
      fill={color}
      className={className}
    >
      <use href={`/sprites.svg#${name}`} />
    </svg>
  );
}

// Utilisation
<Icon name="search" size={20} color="#333" />

Composant Bibliothèque d'Icônes

jsx

// icons/index.tsx
import { FC, SVGProps } from 'react';

interface IconComponentProps extends SVGProps<SVGSVGElement> {
  size?: number;
}

const createIcon = (path: string): FC<IconComponentProps> => {
  return function IconComponent({ size = 24, ...props }) {
    return (
      <svg
        viewBox="0 0 24 24"
        width={size}
        height={size}
        fill="currentColor"
        {...props}
      >
        <path d={path} />
      </svg>
    );
  };
};

export const SearchIcon = createIcon('M15.5 14h-.79l-.28-.27...');
export const HomeIcon = createIcon('M10 20v-6h4v6h5v-8h3L12...');

Icônes SVG optimisées pour les applications web et les design systems — Construire un système d'icônes SVG évolutif dans React avec TypeScript

Styliser les SVG dans React

Style CSS

css

/* styles.css */
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: fill 0.2s;
}

.icon:hover {
  fill: #0066cc;
}

Styled Components

jsx

import styled from 'styled-components';

const StyledSvg = styled.svg`
  width: ${props => props.size || 24}px;
  height: ${props => props.size || 24}px;
  fill: ${props => props.color || 'currentColor'};
  transition: fill 0.2s;

  &:hover {
    fill: ${props => props.hoverColor || props.color};
  }
`;

Tailwind CSS

jsx

<svg
  className="w-6 h-6 fill-current text-gray-600 hover:text-blue-500 transition-colors"
  viewBox="0 0 24 24"
>
  <path d="..."/>
</svg>

"

Le meilleur workflow SVG dans React est celui où les designers exportent des vecteurs propres et les développeurs les importent comme des composants de première classe — aucune étape de conversion manuelle entre les deux.

— Kent C. Dodds, Éducateur React

Animation dans React

Animation CSS

jsx

function LoadingSpinner() {
  return (
    <svg className="animate-spin" viewBox="0 0 24 24">
      <circle
        className="opacity-25"
        cx="12" cy="12" r="10"
        stroke="currentColor" strokeWidth="4"
      />
      <path
        className="opacity-75"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
      />
    </svg>
  );
}

Framer Motion

jsx

import { motion } from 'framer-motion';

function AnimatedIcon() {
  return (
    <motion.svg
      viewBox="0 0 24 24"
      initial={{ scale: 0 }}
      animate={{ scale: 1 }}
      transition={{ type: 'spring' }}
    >
      <motion.path
        d="M12 2L2 22h20L12 2z"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: 1 }}
      />
    </motion.svg>
  );
}

Free SVG Tools for Crafters

Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG

Check Your SVG Free

Stratégies d'Optimisation

Optimisation à la Compilation

javascript

// svgo.config.js
module.exports = {
  plugins: [
    'preset-default',
    'removeDimensions',
    { name: 'removeViewBox', active: false },
    { name: 'prefixIds', params: { prefix: 'svg-' } }
  ]
};

Code Splitting

jsx

// Chargement paresseux des icônes lourdes
const ChartIcon = lazy(() => import('./icons/Chart'));

function Dashboard() {
  return (
    <Suspense fallback={<div className="icon-placeholder" />}>
      <ChartIcon />
    </Suspense>
  );
}

Ne supprimez jamais viewBox lors de l'optimisation SVGO. Sans viewBox, les SVG perdent leur capacité à s'adapter de manière responsive. Définissez toujours removeViewBox: false dans votre configuration SVGO.

Accessibilité dans React

Pattern d'Icône Accessible

jsx

interface AccessibleIconProps {
  label: string;
  children: React.ReactNode;
}

function AccessibleIcon({ label, children }: AccessibleIconProps) {
  return (
    <span role="img" aria-label={label}>
      {children}
    </span>
  );
}

// Utilisation
<AccessibleIcon label="Rechercher">
  <SearchIcon />
</AccessibleIcon>

Bouton Icône

jsx

function IconButton({ icon: Icon, label, onClick }) {
  return (
    <button
      onClick={onClick}
      aria-label={label}
      className="icon-button"
    >
      <Icon aria-hidden="true" />
    </button>
  );
}

Intégration VectoSolve

Workflow

Utiliser VectoSolve avec React :

Convertir les images en SVG
Télécharger la sortie optimisée
Importer dans votre projet React
Utiliser la méthode préférée ci-dessus

Avantages des Fichiers Optimisés

Les SVG de VectoSolve sont :

Optimisés pour le web
Prêts pour l'import SVGR
Données de tracé propres
Faciles à styliser

A Full Year of Conversions for $49

Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime

Get the Annual Deal

Conclusion

React offre plusieurs façons de travailler avec les SVG, chacune avec ses compromis. Choisissez l'approche qui correspond à vos besoins : imports image simples pour un usage basique, SVGR pour un contrôle total, ou patterns de composants pour les systèmes d'icônes. Commencez avec des SVG propres et optimisés de VectoSolve pour les meilleurs résultats.

Obtenez des SVG Prêts pour React

Méthode d'Import SVG	Contrôle Runtime	Impact Bundle	Idéal Pour
<img src> import	Aucun	Requête HTTP séparée	Images décoratives statiques
SVG inline JSX	Total (props, events, CSS)	Augmente la taille du composant	Icônes interactives, animations
Composant SVGR	Total (props typées, tree-shaking)	Chunk par composant	Bibliothèques d'icônes, design systems
Import dynamique	Total (après chargement)	Code-split, chargement paresseux	SVG sous le fold ou conditionnels

Sources et Lectures Complémentaires

MDN Web Docs: SVG in HTML — Référence pour intégrer SVG en JSX et comprendre l'interaction SVG-DOM
web.dev: Code Splitting — Guide Google sur le chargement paresseux et les imports dynamiques pour une taille de bundle optimale
CSS-Tricks: SVG in React — Patterns pratiques pour utiliser des composants SVG dans les projets React et Next.js
Smashing Magazine: React Components — Bonnes pratiques pour construire des bibliothèques de composants SVG réutilisables et accessibles

Key Takeaways

1. Import Image Standard

2. Composants SVG Inline

3. SVGR (Composant React)

4. Import Dynamique

Configuration Next.js

Avec Fallback URL

Composant d'Icône Réutilisable

Composant Bibliothèque d'Icônes

Style CSS

Styled Components

Tailwind CSS

Animation CSS

Framer Motion

Optimisation à la Compilation

Code Splitting

Pattern d'Icône Accessible

Bouton Icône

Workflow

Avantages des Fichiers Optimisés

Try VectoSolve Now

Related articles

Comment nous avons réduit le temps de chargement de 70 % grâce à l'optimisation SVG : étude de cas réelle

Guide du développeur web : Bonnes pratiques d'intégration SVG

Créer des vecteurs prêts pour l'impression : de l'écran à l'impression professionnelle

Related Conversion Tools

PNG to SVG Converter

JPG to SVG Converter

JPEG to SVG Converter

Explore related tools

Ready to vectorize your images?