SVG vers Webflow — Copier et coller des icônes en éléments

Pourquoi coller des icônes SVG comme embeds dans Webflow ?

Importer une icône comme ressource image fonctionne, mais les couleurs du SVG sont alors figées : impossible de les modifier au survol, en mode sombre ou selon le composant. Placer le code SVG dans un Code Embed l’intègre à la page, qui peut alors hériter du CSS. Avec fill="currentColor", l’icône prend simplement la couleur de police de l’élément, et les interactions ou états de survol de Webflow peuvent la recolorer.

Ce que fait le nettoyeur

• Supprime la déclaration XML, les commentaires, les balises <metadata> et les attributs propres aux éditeurs (Figma, Illustrator, Inkscape, Sketch).
• Remplace les couleurs fill/stroke codées en dur par currentColor (conserve none et les références aux dégradés).
• Ajoute un viewBox si absent et règle la largeur/hauteur à 100 % pour que la div englobante contrôle la taille.
• Marque les icônes décoratives avec aria-hidden="true", ou ajoute role="img" et un libellé pour les icônes porteuses de sens.
• Supprime par sécurité les scripts et gestionnaires d’événements en ligne, puis minifie le résultat.

Custom Elements ou Code Embed

Le Custom Element de Webflow permet de créer n’importe quelle balise HTML — y compris svg, path, g, circle et linearGradient — et de lui attribuer des propriétés. Construite ainsi, une icône se compose d’éléments réels du Designer : vous voyez chaque tracé dans le Navigator, ajoutez des classes à des parties précises, les animez avec les Interactions, liez des attributs à des champs CMS et modifiez les valeurs sans ouvrir de code. Un Code Embed est un bloc HTML unique : plus simple, mais une boîte noire dans le Designer.

Fonctionnement de « Copier vers Webflow »

Lorsque vous copiez des éléments dans le Designer Webflow, Webflow place sur le presse-papiers une description JSON de ces éléments. Cet outil génère le même type de données à partir de votre SVG : un Custom Element par balise, avec tous les attributs, et la taille choisie appliquée à l’élément svg racine (ou à une classe facultative). Le collage crée donc de véritables éléments natifs. Webflow ne documente pas officiellement ce format de presse-papiers ; si une future mise à jour le modifie, l’outil dispose d’une solution de repli : le calibrage. Copiez n’importe quel Custom Element depuis votre Designer Webflow, collez-le dans la zone de calibrage, et l’outil apprend le format actuel et l’utilise ensuite (stocké uniquement dans votre navigateur).

Conseils pour les icônes dans Webflow

• Aucune classe n’est ajoutée par défaut. Si vous souhaitez un dimensionnement commun, saisissez un nom de classe et réutilisez-le ; utilisez des unités fluides si les icônes doivent suivre la taille du texte.
• Les SVG très volumineux ou complexes (illustrations, cartes) sont préférables sous forme de ressources image : les Embeds ont une limite de caractères (actuellement 50 000).
• Pour des arrière-plans ou masques SVG, utilisez l’outil SVG vers CSS ; pour les projets React, utilisez SVG vers JSX.

Aussi recherché comme : svg webflow, embed svg webflow, figma vers webflow, icône svg, currentcolor, coller svg webflow, presse-papiers webflow, éléments personnalisés webflow.

Outils complémentaires : SVG vers Webflow

• Figma CSS vers Webflow — Transformez la sortie « Copy as CSS » de Figma en valeurs nettes que vous pouvez saisir directement dans le panneau Style de Webflow.
• Markdown vers Webflow Rich Text — Collez du Markdown, vérifiez l’aperçu et copiez-le en texte mis en forme : titres, listes, liens et gras s’affichent correctement dans l’élément Rich Text de Webflow.
• Calculateur de colliers de serrage — Saisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une valeur adaptée au zoom clamp() , accompagnée d’explications mathématiques, d’un aperçu en temps réel et d’une échelle complète de la typographie fluide ou de l’espacement.
• Redirections WordPress vers Webflow — Migrer un site de WordPress vers Webflow modifie presque toutes les URL : chemins d'articles datés, archives /category/, slashes finaux et slugs de pages.