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

Question

在我的一个 React 应用程序中，我使用的是 Google Material Design 图标。像往常一样，有一些图标和徽标不属于 Google Material Design 图标需要手动添加。在其中一种情况下，我试图在我的应用程序中实现 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

这里我尝试使用 Google Matiral 设计图标以及 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

也许您需要为 svg 设置样式？就像在检查器中放置一个高度或宽度来查看？或者只是检查一下它的高度和宽度。

我不知道 Xing，但大多数时候，这些没有应用宽度，你必须在你的 css 中指定它（比如 FontAwesome）

Answer 2

两个问题：

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

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

你从哪里得到这条路的？