title: React-icon used in an image tag src brings error
body: <p>I am following <a href="https://blog.logrocket.com/creating-a-google-keep-clone-with-react-and-firebase/" rel="nofollow noreferrer">this</a> guide for ReactJS and ran into the aforementioned error while using an Img tag as designated by the guide.</p>
  <pre><code>&lt;Img src={keepLogo} alt=&quot;Google keep logo&quot; /&gt;
  </code></pre>
  <p>Leads to this error:</p>
  <pre><code>Warning: Invalid value for prop `src` on &lt;img&gt; tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.
  </code></pre>
  <p>How am I able to link the source to react-icons? And why does the source not work.</p>
  <p>Here is my code:</p>
  <pre><code>import React from 'react'
  import styled from 'styled-components';
  
  import { DiFirebase, DiGoogleDrive, DiReact } from 'react-icons/di';
  
  const Nav = styled.nav`
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 25px;
      border-bottom: 1px solid rgba(60, 64, 67, 0.2);
  `;
  
  const ImgWrap = styled.div`
      display: flex;
      align-items: center;
  `;
  
  const Img = styled.img`
      width: 40px;
      height: 40px;
  `
  
  
  const Header = () =&gt; {
      return (
          &lt;Nav&gt;
              &lt;h1&gt;Keep clone&lt;/h1&gt;
              &lt;ImgWrap&gt;
                  &lt;Img src={DiGoogleDrive} alt=&quot;Google keep logo&quot; /&gt;
                  &lt;p&gt;+&lt;/p&gt;
                  &lt;Img src={DiReact} alt=&quot;React logo&quot;/&gt;
                  &lt;p&gt;+&lt;/p&gt;
                  &lt;Img src={DiFirebase} alt=&quot;firebase logo&quot;/&gt;
              &lt;/ImgWrap&gt;
          &lt;/Nav&gt;
      )
  }
  
  export default Header
  </code></pre>