在 CRA 应用程序中使用 SVG 文件作为 React 组件

Question

我正在尝试导入一个 svg 文件，但作为一个反应组件，但我看不到实际的图标。 我希望看到一个主页图标，但我看到的只是一个充满黑色的人物。

我试过的

import {ReactComponent as Home} from '../assets/svgs/home.svg'; 
import {List, ListItem, ListItemIcon} from '@material-ui/core'; 

<List>
 {['Home', 'Video', 'Music', 'Sound', 'Painting', 'Images', 'Heritage', 'Fashion'].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>{index % 2 === 0 ? <Home/> : <MailIcon />}</ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
      ))}
<List/>

我的 SVG 文件

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512.000000 512.000000"
 preserveAspectRatio="xMidYMid meet" width="25px" height="25px">

<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 2560 l0 -2560 2560 0 2560 0 0 2560 0 2560 -2560 0 -2560 0 0
-2560z"/>
</g>
</svg>

我得到了什么

我究竟做错了什么？ 我真的很感激你的帮助。

Answer 1

我刚刚在这个网站上检查了你的 SVG： http : //svg.enshrined.co.uk/

SVG 本身坏了我建议你再找一个。

你的SVG