Convertisseur SVG en React
Transformez vos fichiers SVG en composants React à coller dans votre projet. En TypeScript ou JavaScript, avec les props size et title.
Déposez des fichiers SVG ou un dossier iciLes fichiers restent sur votre appareil
Aucun fichier pour l’instant
Les fichiers convertis s’affichent ici. Déposez des fichiers SVG ci-dessus, ou essayez avec des icônes d’exemple.
Comment convertir un SVG en React
- Déposez vos fichiers SVGAjoutez des fichiers, un dossier, ou collez du code SVG.
- Choisissez TypeScript ou JavaScriptRéglez la taille par défaut et choisissez si les icônes d’une couleur suivent la couleur du texte.
- Copiez ou téléchargezCopiez un composant, ou téléchargez tous les fichiers avec un index dans un ZIP.
Autres outils gratuits
Tous les outils- SVG en PNGDes PNG nets à toutes les tailles, un fichier ou des centaines.
- PNG en SVGVectorisez un PNG ou un JPG en un vecteur propre.
- PNG en ICODes fichiers .ico de favicon de 16 à 256 px.
- Favicon et icônes d’appJeux pour site web, Chrome, iOS et Android.
- SVG en ReactDes composants JSX typés, prêts à coller.
- Optimiseur SVGDes SVG plus légers sans perte visible.
- Sprite SVGPlusieurs icônes dans un seul sprite.svg.
- Créateur de stickersDes stickers pour WhatsApp et Telegram.
- Animateur d'icônesSVG animé, Lottie, GIF, stickers Telegram.
Questions
À quoi ressemble le composant ?
Une fonction par icône qui renvoie le SVG en JSX. Elle accepte size, title et toute prop SVG, comme className ou onClick.
Comment changer la couleur de l’icône ?
Les icônes d’une couleur utilisent currentColor : elles prennent la couleur du texte autour. Changez-la en CSS ou avec la prop color.
Est-ce compatible avec Next.js ?
Oui. Les composants sont du React pur, sans dépendance : ils fonctionnent avec Next.js, Vite et Remix.
Que deviennent les dégradés et les ids ?
Les ids sont rendus uniques avec useId de React : plusieurs icônes avec dégradés peuvent cohabiter sur une même page.