source : https://www.pierre-giraud.com/liste-selecteurs-css-utilisation/

h1 {
    display: flex;
    align-items: center;
}

h1::before,
h1::after {
    content: "";
    height: 40px;
    width: 40px;
    background-color: #FFA500;
    mask-image: url('/mysvg.svg');
    -webkit-mask-image: url('/mysvg.svg'); /* Compatibilité Safari */
    mask-size: 40px 40px;
    mask-repeat: no-repeat;
}

h1::before {
    margin-right: .5rem;
}

h1::after {
    margin-left: .5rem;
}

3. Explication du code

• display: flex; align-items: center; : Centre verticalement le texte et les icônes.
• &:before et &:after : Ajoutent les icônes SVG avant et après le titre.
• content: ""; : Nécessaire pour que les pseudo-éléments s'affichent.
• height et width : Définit la taille de l’icône.
• background-color: #FFA500; : Applique la couleur d'affichage.
• mask-image: url('/mysvg.svg'); : Utilise le SVG comme masque.
• mask-size: 40px 40px; mask-repeat: no-repeat; : Ajuste la taille et empêche la répétition.

4. Résultat et compatibilité

Avec ce code, le titre <h1> est encadré par deux icônes SVG colorées. L'utilisation de mask-image permet une personnalisation facile des couleurs via background-color.

Compatibilité navigateur :

• mask-image est bien pris en charge par Chrome, Edge et Safari.
• Pour Firefox, utilisez -webkit-mask-image en complément :

mask-image: url('/mysvg.svg');
-webkit-mask-image: url('/mysvg.svg');

5. Améliorations possibles

• Modifier la couleur avec background-color pour s'adapter au design du site.
• Utiliser un autre SVG pour personnaliser les icônes.
• Ajouter une animation au hover avec transition pour un effet dynamique.

6. Variante : Icône SVG à gauche et ligne à droite

Dans cette version alternative, nous utilisons toujours mask-image pour afficher une icône SVG à gauche du titre <h1>, mais nous ajoutons également une ligne à droite pour un effet visuel plus structuré.

h1 {
    display: flex;
    align-items: center;

    &:before {
        margin-right: .5rem;
        content: "";
        height: 40px;
        width: 40px;
        background-color: #FFA500;
        mask-image: url('/mysvg.svg');
        mask-size: 40px 40px;
        mask-repeat: no-repeat;
    }

    &:after {
        margin-left: 20px;
        flex: 1;
        content: "";
        height: 1px;
        background-color: #FFA500;
    }
}

Explication du code :

• Icône SVG à gauche (&:before) : Identique à la première version, il affiche un SVG coloré.
• Ligne à droite (&:after) :
  • margin-left: 20px; : Espacement entre le titre et la ligne.
  • flex: 1; : Permet d’étirer la ligne pour s’adapter à l’espace disponible.
  • height: 1px; background-color: #FFA500; : Création d’une ligne fine de couleur orange.