SVG图标无法在应用程序中显示.有什么解决办法吗

Question

在我的一个React应用程序中，我使用谷歌材料设计图标。像往常一样，有图标和徽标不是谷歌材料设计的一部分。图标需要手动添加。在其中一个案例中，我试图在我的应用程序中实现XING图标，但它无法在应用程序中显示。

XING.js组件

import React from 'react';
import pure from 'recompose/pure';
import {SvgIcon} from '@material-ui/core';
let xing = (props) => (
<SvgIcon {...props} >
<path d="M442.394 142c-1.736 0-3.197.61-3.934 1.803-.76 1.231-.645 2.818.166 4.424l19.503 33.761c.033.064.033.105 0 .164l-30.648 54.084c-.799 1.592-.76 3.191 0 4.425.736 1.187 2.033 1.966 3.771 1.966h28.844c4.312 0 6.393-2.91 7.867-5.57 0 0 29.973-53.01 31.14-55.068-.118-.19-19.83-34.58-19.83-34.58-1.439-2.557-3.606-5.41-8.03-5.41h-28.849z" fill="#005a5f"/><path d="M563.574 102.501c-4.309 0-6.176 2.714-7.723 5.494 0 0-62.14 110.2-64.188 113.818.105.196 40.984 75.191 40.984 75.191 1.432 2.558 3.641 5.494 8.06 5.494h28.81c1.738 0 3.096-.654 3.828-1.843.77-1.23.748-2.857-.059-4.458l-40.664-74.295a.167.167 0 0 1 0-.189l63.863-112.92c.803-1.594.82-3.22.061-4.452-.736-1.188-2.098-1.843-3.836-1.843h-29.139v.002h.003z" fill="#d4d600"/>
</SvgIcon>
);
xing = pure(xing);
xing.displayName = 'xing';     
xing.muiName = 'SvgIcon';
export default xing;

footer.js

在这里，我尝试使用谷歌Matral设计图标以及XING图标：

import React from "react";
import { Facebook, YouTube } from '@material-ui/icons';
import Xing from '../footer/Xing';
import { makeStyles } from '@material-ui/styles';
...
...
const socialMedia = (
<div class="has-text-centered">
<section class="hero">
<div class="hero-body">
<div class="container">          
<h1 class="title">{L10n.format("social_media")}</h1>
</div>
</div>
<br/>
</section>
<div class="social-media-margin">
<div class="columns">
<div class="column">
<span className="social-media-icon">              
<a
href={"https://www.youtube.com/"}
target="_blank" 
><YouTube /></a>             
</span>
</div>

<div class="column">
<span className="social-media-icon">              
<a                
href={"https://www.facebook.com/"}
target="_blank"
><Facebook/></a>
</span>
</div>

<div class="column">              
<span className="social-media-icon">              
<a                
href={"https://www.xing.com/"}
target="_blank"
><Xing/>          
</a>
</span>
</div>
</div>
</div>
</div>
);
return (
<footer className="footer">
{bannerAddition}
{socialMedia}      
<div className="columns is-centered footer-colmns">
{products}
{solutions}
{service}
{company}
</div>

{legalInformation}      
</footer>
);
};
export default footer;

*XING的SVG数据

<svg xmlns="http://www.w3.org/2000/svg" width="2128" height="2500" viewBox="426.896 102.499 170.207 200">
<path d="M442.394 142c-1.736 0-3.197.61-3.934 1.803-.76 1.231-.645 2.818.166 4.424l19.503 33.761c.033.064.033.105 0 .164l-30.648 54.084c-.799 1.592-.76 3.191 0 4.425.736 1.187 2.033 1.966 3.771 1.966h28.844c4.312 0 6.393-2.91 7.867-5.57 0 0 29.973-53.01 31.14-55.068-.118-.19-19.83-34.58-19.83-34.58-1.439-2.557-3.606-5.41-8.03-5.41h-28.849z" fill="#005a5f"/>
<path d="M563.574 102.501c-4.309 0-6.176 2.714-7.723 5.494 0 0-62.14 110.2-64.188 113.818.105.196 40.984 75.191 40.984 75.191 1.432 2.558 3.641 5.494 8.06 5.494h28.81c1.738 0 3.096-.654 3.828-1.843.77-1.23.748-2.857-.059-4.458l-40.664-74.295a.167.167 0 0 1 0-.189l63.863-112.92c.803-1.594.82-3.22.061-4.452-.736-1.188-2.098-1.843-3.836-1.843h-29.139v.002h.003z" fill="#d4d600"/>
</svg>

Answer 1

两个问题：

React组件必须以大写字母开头。所以不是邢，而是邢。

除此之外，一切都很好，只是你在svg中的路径似乎被破坏了。无论它是封装在组件中还是直接作为svg元素概述，它都不起作用。请参阅：https://codesandbox.io/s/frosty-paper-7nbxr?file=/src/App.js

你是从哪里来的？

Answer 2

也许您需要对svg进行样式化？喜欢在检查员那里放一个高度或宽度吗？或者只是检查一下它的高度和宽度。

我不知道Xing，但大多数时候，这些都没有宽度，你必须在css中指定它(就像FontAwesome一样(