title: How can I change the color of externally imported SVG in React?
body: <p>It is easy to change a color of SVG if you have it available internally. Is there a way to change an SVG's color that comes from the server?</p>
  <p>Here is the example. You can fork it.</p>
  <pre><code>import styled from &quot;styled-components&quot;;
  
  const App = () =&gt; {
    return (
      &lt;StyledApp&gt;
        {/* &lt;HomeIcon /&gt; */}
        {/* &lt;img
          src=&quot;https://gist.githubusercontent.com/alieliacik/2df2a5fdf5b5c707f8dac91f390e01a1/raw/840c8efb0374ac0c3912dc36646abf0a9798832b/try.svg&quot;
          alt=&quot;aa&quot;
        /&gt; */}
  
        &lt;Svg src=&quot;https://gist.githubusercontent.com/alieliacik/2df2a5fdf5b5c707f8dac91f390e01a1/raw/840c8efb0374ac0c3912dc36646abf0a9798832b/try.svg&quot; /&gt;
      &lt;/StyledApp&gt;
    );
  };
  
  export default App;
  
  const StyledApp = styled.div`
    display: flex;
    flex-direction: column;
  `;
  
  const Svg = styled.div`
    background-color: red;
    height: 80px;
    width: 80px;
    mask: ${({ src }) =&gt; `url(${src}) no-repeat `};
    mask-size: 80px 80px;
  `;
  </code></pre>
  <p><a href="https://codesandbox.io/s/global-theming-dynamic-icon-0npro?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/global-theming-dynamic-icon-0npro?file=/src/App.js</a></p>