Introduction

Lorsque l’on ajoute des icônes SVG sur Webflow, on ne peut malheureusement pas les modifier directement depuis l’interface Designer. Il faut à chaque fois exporter une nouvelle icône si on veut par exemple avoir une couleur différente.

Il existe pourtant une manière de modifier la couleur d’une icône SVG grâce à un embed et un peu de code, directement depuis Webflow. On vous explique comment dans cet article !

‍

Si vous préférez suivre un tutoriel plus visuel, allez voir notre vidéo Youtube sur le sujet :

‍

‍

‍

Comment faire ? 🤔

Pour commencer, vous devez ajouter votre icône SVG sur Webflow, exportée depuis Figma au format SVG par exemple. Jusque-là rien de compliqué.

Seulement, si vous ajoutez l’icône comme une image, il sera impossible de venir modifier sa couleur.

Pour pouvoir modifier la couleur et rendre votre icône SVG totalement personnalisable, la technique est d’utiliser un Embed et d’utiliser le code source de votre icône.

‍

‍

Étapes pour modifier la couleur 🖌

• Pour commencer, rendez vous dans l’onglet “Assets” du designer Webflow, et cliquez sur le petit icône de réglage situé en haut à droite de votre image.
• Ensuite, il vous faut cliquer sur la flèche à droite du nom de votre icône SVG pour ouvrir le lien de l’image.

‍

‍

• Vous atterrissez alors sur un nouvel onglet avec votre icône. Vous allez ainsi pouvoir afficher le code source de la page et le copier (clic droit : “inspecter le code source”).
• Une fois le code source copié, vous retournez dans Webflow et vous ajoutez un Embed dans lequel vous allez collez le code source.

‍

‍

• Dans le code source, il vous faut chercher quel est l’indicateur de la couleur de votre icône SVG. Dans certains cas, ça peut être “fill = black” si votre icône est entièrement noir comme pour la flèche noire de notre exemple.
• Lorsque vous avez trouvé l’indicateur, vous avez simplement à remplacer la couleur existante par le terme “currentcolor” afin que votre icône SVG prenne la couleur que vous choisirez dans la palette.
• Vous n’avez plus qu’à fermer l’embed en cliquant sur “Save & Close” et vous pourrez alors choisir la couleur qui vous convient pour votre icône ! 👍🏼

‍

‍

‍

Changer la taille d’une icône SVG avec un embed de code

Grâce à l’intégration d’un embed dans les étapes précédentes, cela vous donne également la possibilité de rendre votre icône ajustable en termes de taille.

Pour cela, vous trouverez dans le code source de votre icône un indicateur de hauteur : “height” et de largeur “width”.

• Vous allez simplement remplacer la valeur située après “height=” par “100%” et effacer la valeur situé après width : width=””
• Puis vous fermez votre embed en cliquant sur “Save & Close”.

Vous pouvez maintenant régler la largeur de votre icône SVG dans les paramètres Size du designer Webflow. ✅

‍

J’espère que ces astuces vous seront utiles 😎

‍