Comment ajouter de la couleur à mon image svg dans react

Question

J'ai une liste d'icônes. Je veux changer les couleurs des icônes en blanc. Par défaut, mes icônes sont noires. Des suggestions les gars?

J'utilise normalement 'fill: white' dans mon css mais maintenant que je fais ça dans React ... ça ne marche pas!

import React from 'react'
import menuIcon from '../img/menu.svg';
import homeIcon from '../img/home.svg';


<ul>
   <li>
    <a href="/" className="sidebar__link">
     <img src={menuIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
   <li>
    <a href="/" className="sidebar__link">
     <img src={homeIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
</ul>



.sidebar__icon {
 fill: #FFFFF;
 width: 3.2rem;
 height: 3.2rem;
}

Answer 1

Ma suggestion est d'utiliser un outil comme le convertisseur de polices SVG, icomoon est mon préféré, créez votre propre bibliothèque de polices personnalisée pour importer vos icônes SVG

Accessoires

• Changez la couleur, la taille de la police, etc. avec CSS pour les icônes
• Utilisation dans tout le projet avec une seule importation
• Ils fournissent un ensemble gratuit d'icônes/icônes

Les inconvénients

• Courbe d'apprentissage initiale
• Suivez correctement les dimensions, le contour, etc. tout en créant des icônes SVG
• Difficile pour les icônes multicolores