L'intégration de logos de marques et d'icônes technologiques dans les interfaces utilisateur nécessite une approche rigoureuse pour garantir la cohérence visuelle et les performances. La bibliothèque open-source Simple Icons offre une collection standardisée de plus de 3000 SVG. Cet article détaille une méthodologie d'ingénierie pour intégrer cette bibliothèque dans un écosystème React, en mettant l'accent sur la gestion stricte des dépendances et la création de composants atomiques.

1. Configuration du projet et stratégie de dépendances

L'installation du paquet est la première étape. Il est crucial de contrôler les mises à jour pour éviter les modifications inattendues des chemins SVG (paths) qui pourraient altérer le rendu visuel de l'application.

# Utilisation de npm avec sauvegarde exacte
npm install simple-icons --save-exact

# Ou avec pnpm
pnpm add simple-icons --save-exact

L'utilisation de l'indicateur --save-exact force l'enregistrement d'une version précise dans le fichier de configuration, éliminant les risques liés aux mises à jour mineures ou de correctifs non testées qui pourraient modifier les données des icônes.

{
  "dependencies": {
    "simple-icons": "12.0.0"
  }
}

La bibliothèque inclut nativement les définitions de types TypeScript. L'architectuer modulaire permet aux outils de build modernes d'appliquer le Tree Shaking efficacement, garantissant que seules les icônes importées sont incluses dans le bundle final.

import { siNextdotjs, siTailwindcss, siPostgresql } from 'simple-icons/icons';

// L'inférence de type garantit la présence des propriétés 'path', 'hex', et 'title'
const databaseIcon = siPostgresql;
console.log(databaseIcon.slug); // 'postgresql'

2. Conception d'un composant atomique pour les icônes

Pour éviter la duplication de code SVG et centraliser la logique d'accessibilité, il est rceommandé d'encapsuler les données de Simple Icons dans un composant React dédié.

import type { FC, SVGProps } from 'react';
import type { SimpleIcon } from 'simple-icons';

type CorporateIconProps = {
  data: SimpleIcon;
  dimension?: number;
  tint?: string;
} & Omit<SVGProps<SVGSVGElement>, 'width' | 'height' | 'viewBox'>;

export const CorporateIcon: FC<CorporateIconProps> = ({
  data,
  dimension = 24,
  tint,
  ...svgAttributes
}) => {
  const computedColor = tint ?? `#${data.hex}`;

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width={dimension}
      height={dimension}
      role="img"
      aria-label={data.title}
      {...svgAttributes}
    >
      <path d={data.path} fill={computedColor} />
    </svg>
  );
};

Cette implémentation améliore l'accessibilité en utilisent aria-label directement sur l'élément SVG, tout en permettant la propagation d'attributs HTML standard via le type SVGProps. La couleur par défaut est extraite de l'objet SimpleIcon, mais peut être surchargée via la prop tint.

import { siDocker, siKubernetes, siAmazonaws } from 'simple-icons/icons';
import { CorporateIcon } from './ui/CorporateIcon';

export const InfrastructureStack = () => {
  return (
    <section className="flex gap-4 items-center">
      <CorporateIcon
        data={siDocker}
        dimension={32}
        className="hover:opacity-80 transition-opacity"
      />
      <CorporateIcon
        data={siKubernetes}
        dimension={32}
        tint="#326CE5"
      />
      <CorporateIcon
        data={siAmazonaws}
        dimension={32}
      />
    </section>
  );
};