Comment fonctionne le forwarding ...props ?

Le composant prend `{ size, color, ...props }` et étale `{...props}` sur l'élément SVG. Cela permet de **passer n'importe quel attribut DOM** : ` `. Sans forwarding, les props disparaîtraient silencieusement et vous devriez modifier le composant à chaque fois.

Pourquoi le nom du composant doit-il être en PascalCase ?

JSX **décide ce qu'est une balise à sa première lettre** : minuscule = élément HTML (` `, ` `), majuscule = composant React (` `). Si vous appelez votre composant `iconCheck` (minuscule), JSX pense que c'est **une balise HTML « iconcheck »** et ne rend rien. Le PascalCase est **obligatoire par convention**.

Et si le SVG a plusieurs couleurs (par exemple une illustration) ?

L'outil **n'extrait que la première couleur ou la dominante** comme prop. Les autres restent inline dans le composant. Vous pouvez ensuite ajouter manuellement d'autres props (comme `accentColor`, `backgroundColor`) et substituer les valeurs. Ou désactivez « Extract color » et laissez tout tel quel.

Default export ou named export ?

L'**export nommé** (`export const IconCheck`) est **plus courant dans les bibliothèques** : plus simple pour importer beaucoup d'icônes d'un coup : `import { IconCheck, IconClose } from "./icons"`. L'**export par défaut** (`export default function`) est pratique quand un fichier contient **un seul composant**. Pour une bibliothèque d'icônes, **préférez named** ; pour un composant unique, **default convient**.

Qu'est-ce que React.FC vs une fonction simple ?

`React.FC ` est le **type de composant fonctionnel**. C'est l'approche de typage plus ancienne, **assez controversée** (`children` par défaut dans le type, certains patterns fonctionnent différemment). Le code moderne **utilise une fonction simple** avec des types de prop stricts : `const IconCheck = ({size, color}: IconProps) => ...`. C'est plus clair. L'outil propose les deux versions : **choisissez la fonction simple** sauf si votre projet a l'autre convention.

Puis-je utiliser le composant généré dans Next.js ?

Oui. **Il fonctionne comme Server Component ou Client Component**. Si le composant n'utilise ni state ni événement, **il peut être un Server Component** (mieux pour le SEO). Si vous branchez `onClick` à l'extérieur, **le wrapper doit être un Client Component** mais pas l'icône. Déposez simplement le fichier dans `components/icons/` et importez comme d'habitude.

Et si le SVG n'a pas de viewBox ?

**Sans `viewBox`, le SVG ne s'adapte pas**. Le composant rendra à une taille fixe malgré la prop `size`. Correctif : ajoutez un viewBox à la main dans le SVG avant conversion, ou éditez le composant généré. La valeur de `viewBox` est « min-x min-y width height » : pour une icône typique 24x24, c'est `"0 0 24 24"`. L'optimiseur SVG signale l'absence de viewBox.

Puis-je passer className ?

Oui : si vous gardez **forward ...props** activé, vous pouvez passer `className`, `style`, n'importe quelle prop DOM. Exemple : ` ` : la couleur est définie via Tailwind plutôt que via la prop `color`. Rappel : `currentColor` dans le SVG lit le `color` CSS, donc `text-green-500` (c'est-à-dire `color: green`) fonctionne.

Que fait « extract size » ?

Il remplace les `width="24"` et `height="24"` codés en dur par des valeurs pilotées par prop : `width={size} height={size}`. Permet de rendre le même composant à différentes tailles : ` ` ou ` `. Sans ça, la **taille est figée** dans le SVG et il faut la surcharger via CSS. Le défaut est 24 (la taille d'icône standard).

SVG vers composant React - gratuit

Pourquoi convertir un SVG en composant React ?

Un SVG brut dans une app React a quelques bizarreries : `class` doit devenir `className`, les attributs avec tirets (`stroke-width`) passent en camelCase, la couleur est codée en dur dans le SVG. Si vous voulez rendre la même icône dans une autre couleur, il vous faut un second fichier. Une taille différente ? Encore un fichier, ou une surcharge CSS.

Un composant React avec props gère ça proprement : `<IconCheck size={20} color="red" />`. Un seul fichier, n'importe quelle couleur, n'importe quelle taille. Plus le forwarding `...props` : ajoutez `aria-label` ou `onClick` sans toucher au composant.

Collez votre SVG (Figma, Iconify, votre propre art), choisissez les options (TypeScript vs JSX, export nommé vs défaut, prop `color`/`size` ou non) et obtenez un composant prêt à copier. Téléchargez sous `.tsx` avec un nom de fichier correct ou copiez dans le presse-papiers.

Mode d'emploi

Collez le code SVG dans le panneau de gauche. Ça peut être une icône (24x24), un logo, une illustration : n'importe quel SVG.
Entrez un nom de composant (PascalCase, par exemple `IconCheck`, `LogoBrand`).
Activez les options : TypeScript pour une version typée, default export ou named.
À droite, vous obtenez le composant prêt. En dessous, un aperçu en direct avec la taille et la couleur actuelles.
Cliquez sur « Copier » pour copier le code ou « Télécharger .tsx » pour enregistrer le fichier avec le bon nom.

Quand ça aide

Cas d'usage pratiques :

Bibliothèque d'icônes d'un projet. Le designer exporte 30 icônes depuis Figma, vous en convertissez chacune et vous vous retrouvez avec un `components/icons/` plein de fichiers `.tsx`. Chaque icône a des props size/color et est theme-aware.
Logo d'entreprise. Export depuis Illustrator, conversion, vous obtenez `<LogoBrand size={32} />` pour le header, le footer, les embeds sociaux.
Icônes de statut. `<IconSuccess color="green" />`, `<IconError color="red" />` : un fichier, des couleurs différentes selon l'état.
Illustrations hero personnalisées. Une illustration SVG dans la hero section, désormais un composant avec couleurs d'accent modifiables.
Un remplacement de lucide-react / heroicons. Il vous faut parfois une icône qu'aucune bibliothèque ne fournit. Convertissez la vôtre.
SVG à la compilation. En Next.js, un composant bat `<Image src="/icon.svg" />` : moins de requêtes, meilleur SSR.
Prop forwarding. `<IconClose onClick={handleClose} aria-label="Close modal" />` : accessibilité et interaction en un seul geste.

D'abord, réduisez votre SVG avec l'optimiseur SVG. Pour HTML vers JSX, voir le convertisseur HTML vers JSX.

Questions fréquentes

`currentColor` est une valeur CSS spéciale signifiant « prendre la valeur du `color` du parent ». Donc une icône dans `<div style={{color: "red"}}><IconCheck /></div>` sera rouge. C'est le meilleur défaut parce que l'icône hérite du style, fonctionne avec hover (`text-blue-500 hover:text-blue-700`), fonctionne avec le thème. Pour une couleur fixe, passez-la explicitement : `<IconCheck color="#3b82f6" />`.

SVG vers composant React