4
votes

Comment styliser les icônes React

J'essaie de comprendre comment styliser les icônes que j'importe en utilisant react-icons .

En particulier, j'aimerais pouvoir créer un look similaire à celui-ci:

C'est-à-dire que j'aimerais ajouter une couleur d'arrière-plan, un remplissage, un rayon de bordure, etc. Cependant, je ne trouve pas de moyen facile de le faire.

Je peux ajouter un accessoire de taille et de couleur et cela changera la taille et la couleur réelles de l'icône. Mais il n'y a pas de moyen facile pour moi de changer les autres éléments.

Quelqu'un sait-il comment je peux faire cela (ou peut-il recommander une bibliothèque différente qui peut m'aider)?

reactjs react-icons

0 commentaires

4 Réponses :

7
votes

Utilisez IconContext comme mentionné dans la documentation .

function BlueLargeIcon() {
  return (
    <IconContext.Provider
      value={{ color: 'blue', size: '50px' }}
    >
      <div>
        <FaBeer />
      </div>
    </IconContext.Provider>
  );
}

2 commentaires

Merci - je ne sais pas comment j'ai raté ça.

:-) Toda Rabba.

1
votes

import {IconContext} from "react-icons";

class App extends component {

return (

<div>
<IconContext.Provider value={{ className="myReact-icons"}}>
       <FaBeer />
  </IconContext.Provider>
</div>
);  
}

css example below

.myreact-icons { color: red;
                 height: 40px;
               }

0 commentaires

0
votes

Il existe un moyen plus simple de changer la couleur d'une icône de réaction. Vous pouvez choisir tout ce qui se trouve à l'intérieur de l'icône svg avec .icon > * utiliser le fill css pour remplir le chemin svg.

```
.icon > * {
    fill: #B3B3B3;
}

.icon > *:hover {
    fill: #747474;
}
```

0 commentaires

0
votes

Vous pouvez le faire en ajoutant simplement une propriété de couleur à l'icône, il en va de même pour d'autres propriétés comme la taille.

<BiXCircle size={40} color="red" />

0 commentaires