How to change fill color for React icons?

Question

I want to change the color of React-icons. Say, for example {AiFillHeart} icon. I want to change its fill color to red. How can I do this?

I have tried <AiFillHeart style = {{color: 'red'}}/>. But it does not works.

Answer 1

1. Open your svg file in editor.
2. change the attribute of fill of every path to fill="currentColor"

Answer 2

You need to know what the underlying code for AiFillHeart looks like. Assuming it returns an <svg> and you can pass props into that element, you could specify the fill and / or stroke like so:

const AiFillTriangle = ({ fillColor, strokeColor }) => {
  return (
    <svg>
      <path d="M150 0 L75 200 L225 200 Z" fill={fillColor} stroke={strokeColor} />
    </svg>
  );
};

ReactDOM.render(
  <AiFillTriangle fillColor="red" strokeColor="blue" />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>