BackgroundIcon

Un conteneur décoratif qui affiche une icône sur un fond coloré (cercle ou squircle), avec une opacité de 20 % appliquée à la couleur de fond.

Import

Import

import { BackgroundIcon } from "@/components/BackgroundIcon";

Utilisation basique

<BackgroundIcon Icon={<InfoIcon />} color="#2468C1" />

Forme

Le prop squircle bascule entre un fond circulaire (borderRadius: 50, comportement par défaut) et un fond "squircle".

Cercle (défaut)Squircle

<BackgroundIcon
  Icon={<CheckCircleIcon />}
  color="#33B3A0"
/>

<BackgroundIcon
  Icon={<CheckCircleIcon />}
  color="#33B3A0"
  squircle
/>

borderRadius: 50 avec cornerShape: squircle

Lorsque squircle est activé, borderRadius reste fixé à 50 (valeur pensée pour un cercle) pendant que cornerShape passe à 'squircle'. Le rendu final dépend donc du support de corner-shape par le navigateur — voir la note ci-dessous.

Couleur

Le prop color définit la couleur de fond de l'icône. En interne, la couleur est utilisée telle quelle pour l'icône passée en enfant (Icon), et avec un suffixe d'opacité 33 (~20 %) pour le fond.

<BackgroundIcon
  Icon={<ErrorIcon sx={{ color: "#EA605D" }} />}
  color="#EA605D"
/>

Cohérence avec la couleur de l'icône

BackgroundIcon ne colore pas automatiquement l'icône passée en Icon — seul le fond est teinté. Pense à styliser l'icône elle-même avec la même couleur pour un rendu cohérent, comme dans l'exemple ci-dessus.

Format de couleur requis

Le calcul d'opacité repose sur la concaténation ${color}33 : color doit impérativement être une valeur hexadécimale (#RRGGBB), sous peine de générer une couleur de fond invalide.

API

Props

Prop	Type	Défaut	Description
Icon	ReactNode	—	Requis. Icône affichée au centre du fond coloré.
color	string	—	Requis. Couleur hexadécimale utilisée pour le fond (à 20 % d'opacité).
squircle	boolean	false	Active un fond "squircle" au lieu d'un fond circulaire.

Pas de prop sx

BackgroundIcon n'expose pas de prop sx ni de props Box supplémentaires : le style est entièrement géré en interne via la fonction Styles.

Détails d'implémentation

• Le fond est un Box en display: flex avec un padding de theme.spacing(1), permettant à l'icône enfant d'être naturellement centrée si elle-même n'a pas de dimensions fixes en conflit.
• Les styles sont calculés par une fonction Styles(theme, color, squircle) externe au composant, plutôt qu'un useMemo interne, il n'y a donc pas de mémoïsation basée sur les dépendances : les styles sont recalculés à chaque rendu.
• cornerShape: 'unset' est utilisé comme valeur par défaut plutôt que d'omettre la propriété, pour explicitement réinitialiser un éventuel cornerShape hérité du thème.

Support navigateur de cornerShape

La propriété CSS corner-shape fait partie d'une spécification CSS récente et n'est pas supportée par tous les navigateurs. Prévoir un fallback visuel acceptable (le cercle via borderRadius: 50 reste appliqué en toutes circonstances) si squircle est utilisé sur un navigateur non compatible.

Accessibilité

BackgroundIcon étant un conteneur purement visuel, l'icône passée via Icon doit porter elle-même les attributs d'accessibilité nécessaires (aria-hidden="true" si décorative, ou aria-label si elle véhicule une information non redondante avec du texte adjacent).