在图像标记src中使用的React-icon会带来错误

Question

我正在遵循ReactJS的this指南，在使用指南指定的Img标签时遇到了上述错误。

<Img src={keepLogo} alt="Google keep logo" />

导致以下错误：

Warning: Invalid value for prop `src` on <img> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

我怎样才能将源码链接到react-icons？为什么源码不起作用。

下面是我的代码：

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 = () => {
    return (
        <Nav>
            <h1>Keep clone</h1>
            <ImgWrap>
                <Img src={DiGoogleDrive} alt="Google keep logo" />
                <p>+</p>
                <Img src={DiReact} alt="React logo"/>
                <p>+</p>
                <Img src={DiFirebase} alt="firebase logo"/>
            </ImgWrap>
        </Nav>
    )
}

export default Header

Answer 1

原来你必须将react-icons集成为react组件，因为它们不是本地托管的png/graphic文件类型？如果我错了，请纠正我。但这解决了它：

<DiGoogleDrive />

而不是原始的HTML img标记。

{/* <Img src={DiGoogleDrive} alt="Google keep logo" /> */}