Fatal编程技术网
  • javascript/
  • Javascript SVG图标无法在应用程序中显示。有什么解决办法吗？

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

javascript reactjs

Javascript SVG图标无法在应用程序中显示。有什么解决办法吗？,javascript,reactjs,google-material-icons,Javascript,Reactjs,Google Material Icons,在我的一个React应用程序中，我正在使用Google材质设计图标。像往常一样，有一些图标和徽标不属于谷歌材料设计的一部分，需要手动添加图标。在其中一种情况下，我试图在我的应用程序中实现XING图标，但它无法在应用程序中显示 XING.js组件 import React from 'react'; import pure from 'recompose/pure'; import {SvgIcon} from '@material-ui/core'; let xing = (props) =&

在我的一个React应用程序中，我正在使用Google材质设计图标。像往常一样，有一些图标和徽标不属于谷歌材料设计的一部分，需要手动添加图标。在其中一种情况下，我试图在我的应用程序中实现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;


从“React”导入React；
从“重新组合/纯”导入纯；
从'@material ui/core'导入{SvgIcon}；
让星=（道具）=>(
);
兴=纯（兴）；
xing.displayName='xing'；
xing.muiName='SvgIcon'；
出口违约；
footer.js

在这里，我尝试使用谷歌Material设计图标以及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;


从“React”导入React；
从“@materialui/icons”导入{Facebook，YouTube}；
从“../footer/Xing”导入Xing；
从'@material ui/styles'导入{makeStyles}；
...
...
常量社会媒体=(
{L10n.format（“社交媒体”）}


);
返回(
{banneradition}
{社会媒体}
{产品}
{解决方案}
{service}
{公司}
{法律信息}
);
};
导出默认页脚；
*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>
两个问题：

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

除此之外，一切都很好，只是svg中的路径似乎已损坏。无论它是包装在组件中还是直接作为svg元素概述，它都不起作用。见：

您从何处获得该路径？

也许您需要设置svg的样式？比如说，在检查员的眼睛里放上一个高度或宽度？或者只是检查一下它的高度和宽度

我不知道Xing的情况，但大多数情况下，Xing没有应用宽度，您必须在css中指定宽度（如FontAwesome）

谢谢您的回答。我从他们的网站下载了XING徽标，然后用VS代码打开了它。在VS代码中，我可以看到SVG文件的路径。如果您完全复制了它，请检查您的路径字符串。我刚刚将svg路径字符串复制到上面链接的代码沙盒中，它显示了徽标。这个字符串比您拥有的要长得多。再次感谢，不幸的是，使用两个不同的SVG路径没有成功。我正试图通过以下链接将其缩小：