Changer la couleur d'une icône au clic avec HTML et CSS

Étape 1 : Créer la structure HTML de l'icône

<div class="svg-container">
    <input type="checkbox" id="color-toggle">
    <label for="color-toggle">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
        </svg>
    </label>
</div>

Explication du Code HTML

• <div class="svg-container"> : Le conteneur principal de l'icône cliquable, qui englobe à la fois le SVG et la checkbox.
• <input type="checkbox"> : Un élément checkbox qui permet de déterminer si l'icône a été cliquée ou non. Cette case est liée à l'élément label, ce qui permet de basculer son état lors d'un clic.
• <label for="color-toggle"> : Le label est un élément qui associe le clic à l'élément input. Le for="color-toggle" fait en sorte que cliquer sur l'icône SVG active ou désactive la case à cocher.
• <svg> : C'est l'élément SVG qui définit l'icône, ici un cœur. Ce format vectoriel permet une grande flexibilité et une qualité d'image optimale sur tous les écrans.

Étape 2 : Ajouter des styles CSS

.svg-container {
    display: inline-block;
}

.svg-container svg {
    width: 24px;
    height: 24px;
    fill: transparent;
    stroke: #000;
    cursor: pointer;
    transition: fill 0.3s, stroke 0.3s;
}

.svg-container input[type="checkbox"] {
    display: none;
}

.svg-container input[type="checkbox"]:checked + label svg {
    fill: #E91E63;
    stroke: #E91E63;
}

Explication du Code CSS

• .svg-container : Définit le conteneur de l'icône.
• .svg-container svg : Spécifie la taille de l'icône SVG (24x24 pixels) et ses couleurs par défaut avec un style de curseur cliquable.
  On définit par défaut un remplissage transparent fill: transparent et un contour noir stroke: #000.
  La propriété transition permet une animation fluide des changements de couleurs.
• .svg-container input[type="checkbox"] : Cache la checkbox elle-même, car elle est utilisée uniquement comme mécanisme de contrôle pour l'icône.
• .svg-container input[type="checkbox"]:checked + label svg : Cette règle applique la couleur rose #E91E63 à l'icône lorsque la checkbox est cochée. L'icône SVG change ainsi de couleur au moment du clic.

Exemple

Essayez de cliquer sur l'icône ci-dessous pour voir sa couleur se modifier.