cannot change GR colors in react-icons

Question

I found gr images cannot be changed color, do you know how to solve this problem? Thank you.

import React from "react";
import "./styles.css";
import { GrAssistListening } from "react-icons/gr";

export default function App() {
  return (
    <div>
      <GrAssistListening color="red" size="xlarge" />
    </div>
  );
}

Answer 1

Try Using this Approch

  import React from "react";
  import "./styles.css";
  import { GrAssistListening } from "react-icons/gr";

  export default function App() {
    return (
      <div>
        <GrAssistListening style={{color: red, font-size: 30px}} />
      </div>
    );
  }

Answer 2

Go into

node_modules\react-icons\gr\index.esm.js

Search for

GrAssistListening

Initial code of GrAssisListening

export function GrAssistListening (props) { return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","stroke":"#000","strokeLinecap":"round","strokeLinejoin":"round","strokeWidth":"2","d":"M11,21 C11.7572165,21.6666667 12.4238831,22 13,22 C15,22 16,21 16,19 C16,17.6666667 16.6666667,16.3333333 18,15 C19.2667508,13.7332492 20,11.9329966 20,10 C20,6.13400675 16.8659932,3 13,3 C9.13400675,3 6,6.13400675 6,10 M17,10 C17,7.790861 15.209139,6 13,6 C10.790861,6 9,7.790861 9,10 M3,20 L8,14 L9,18 L14,12"}}]})(props);

};

Now change or delete the stroke value then restart start server to take effect.

Answer 3

This is kind of old but since there were no answers on it, it might help some other people. Unfortunately we need to go the ugly way..

    import React from "react";
    import "./styles.css";
    import { GrAssistListening } from "react-icons/gr";

    export default function App() {
      return (
        <div>
            {/* Workaround for GR icons coloring */}
            <style>
              {`
                svg path {
                  stroke: red
                }
                `}
            </style>
          <GrAssistListening color="red" size="xlarge" />
        </div>
      );
    }

Answer 4

give your icon a classname for example .icon and target it like this:

.icon path{
   stroke: red (your color)
}

Answer 5

icon package GR is buggy. Changing color does not work as expected. Use another package for example Md. Icons overtake color of the text.

Examples: Style:

<MdLanguage  style={{color:'white'}}/>

TAILWIND

<MdLanguage  className='text-white'/>

Answer 6

Just add the path and strock to change its color My example JS <GrLicense size={70} className={styles.icon} />

CSS

.icon path {
stroke: (color);}