Блог

В одном из моих приложений 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 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;
 

* SVG-ДАННЫЕ XING

 <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, похоже, поврежден. Он не работает независимо от того, заключен ли он в component или просто непосредственно выделен как элемент svg. См.: https://codesandbox.io/s/frosty-paper-7nbxr?file=/src/App.js

Откуда у вас взялся этот путь?

Может быть, вам нужно стилизовать svg? Например, укажите высоту или ширину в инспекторе, чтобы увидеть? Или, может быть, просто проверьте его, чтобы увидеть, какую высоту и ширину он имеет.

Я не знаю о Xing, но в большинстве случаев к ним не применяется ширина, и вы должны указать ее в своем css (например, в FontAwesome)