tlx-candy-icons

Librairie d'icônes Candy pour l'écosystème TalentListX. Icônes natives immuables + wrapper CandyBox pour icônes tierces.

Installation

npm install tlx-candy-icons

Architecture

La librairie expose deux familles distinctes de composants.

Icônes natives (statiques)

Ces composants représentent des illustrations de marque prêtes à l'emploi. Leur rendu visuel est immuable : fond, couleur interne et taille interne sont fixes.

| Composant | Description | Fond par défaut | | :------------ | :------------------------------ | :-------------- | | JobIcon | Illustration offre d'emploi | #2865EC | | EmptyOffer | État vide liste d'offres | #9E9EAD | | SuccessAuth | Confirmation d'authentification | #4CAF82 | | TlxCandy1 | Logo principal (Gris/Standard) | #9E9EAD | | TlxCandy2 | Logo secondaire (Bleu) | #9E9EAD | | Logo | Sélecteur de logo (wrapper) | Variable |

Seule prop autorisée : size (nombre, défaut 80).

import { JobIcon, EmptyOffer, SuccessAuth, Logo, TlxCandy1, TlxCandy2 } from 'tlx-candy-icons';

<JobIcon size={80} />
<EmptyOffer size={64} />
<SuccessAuth size={48} />
<Logo size={36} />
<Logo size={36} variant="blue" />

CandyBox (wrapper flexible)

CandyBox est le seul composant flexible. Il est destiné à accueillir une icône tierce (Lucide, Hugeicons, Heroicons, React Icons, etc.) en lui imposant automatiquement la charte Candy :

• Couleur forcée : l'icône enfant reçoit automatiquement color="#FFFFFF".
• Centrage automatique : l'icône est centrée sur X et Y.
• Taille proportionnelle : l'icône occupe 50 % du conteneur (calculé par le package).

import { CandyBox } from 'tlx-candy-icons';
import { BriefcaseBusinessIcon } from 'lucide-react';

<CandyBox size={80} variant="primary">
  <BriefcaseBusinessIcon />
</CandyBox>

L'utilisateur ne doit pas passer size ou color à l'icône enfant. Le package s'en charge.

Variants disponibles

La palette sémantique est stricte. Seuls ces variants sont acceptés par CandyBox :

| Variant | Couleur | Usage | | :---------- | :-------- | :-------------------------- | | default | #9E9EAD | État neutre | | primary | #5B8DEF | Action principale / Brand | | success | #4CAF82 | Succès / Validation | | danger | #F05C6E | Erreur / Critique | | warning | #F5A623 | Avertissement | | info | #29B6D4 | Information | | muted | #B8B8C8 | Inactif / Archivé | | premium | #9C6FDE | VIP / Exclusivité | | new | #FF7A59 | Nouveauté | | star | #F5C842 | Favori / Mis en avant | | nature | #6DBF6A | Écologie / Santé |

API

CandyBox

type CandyBoxProps = {
  size?: number;       // Taille globale du bloc (défaut: 80)
  variant?: CandyVariant; // Couleur du fond Candy (défaut: 'default')
  children: React.ReactNode; // Icône tierce
  className?: string;
};

Icônes natives

type NativeIconProps = {
  size?: number;    // Taille globale du composant (défaut: 80)
  className?: string;
};

Logo

type LogoProps = {
  size?: number;          // Taille globale (défaut: 36)
  variant?: 'default' | 'blue'; // Choix du fichier de logo
  className?: string;
};

Ce qu'il ne faut pas faire

// ❌ Ne jamais passer bg, padding, iconSize ou color custom
<CandyBox bg="#000000">
  <Icon color="red" size={12} />
</CandyBox>

// ❌ Ne jamais tenter de changer la couleur d'une icône native
<JobIcon variant="success" />
<EmptyOffer bg="#FF0000" />

Ces patterns sont volontairement interdits par l'API. Ils ont été supprimés pour garantir la cohérence visuelle du système Candy.

Compatibilité des bibliothèques d'icônes tierces

CandyBox est compatible avec les principales bibliothèques :

| Bibliothèque | Compatibilité | Note | | :----------- | :------------ | :-------------------------------- | | Lucide React | ✅ Complète | size + color injectés | | Hugeicons | ✅ Complète | size + color injectés | | Heroicons | ✅ Complète | width/height + color | | React Icons | ✅ Complète | size + color via style |

Développement

# Générer les composants depuis les SVG dans /icons
npm run generate

# Build production
npm run build

# Générer + builder en une commande
npm run icons

# Watcher (dev)
npm run dev

Ajouter une icône native

1. Placer le SVG dans /icons (ex: my-icon.svg).
2. Lancer npm run generate.
3. Le composant MyIcon est généré dans src/components/ et exporté automatiquement.

Les composants CandyBox et Logo sont protégés — le script de génération ne les écrasera jamais.

Décisions d'architecture

• Icônes natives immuables : le fond, la couleur et la taille interne sont codés en dur dans chaque composant. L'utilisateur final ne peut que redimensionner le bloc entier via size.
• Génération automatique : Toutes les icônes natives (y compris les logos TlxCandy1 et TlxCandy2) sont générées à partir des fichiers SVG du dossier icons/, garantissant que les SVG sont la seule source de vérité.
• CandyBox via foreignObject : le centrage de l'icône tierce est réalisé via foreignObject + Flexbox dans le SVG, ce qui garantit un centrage pixel-perfect quelle que soit la bibliothèque utilisée.
• Palette fermée : CANDY_VARIANTS est la seule source de vérité. bg, padding, iconSize et color ont été supprimés de l'API publique.
• SuccessAuth : renommé (casse corrigée depuis SuccesAuth).