SVG Icon is not able to display in the application. Is there any solution for it?

Question

In one of my React Application, I am using Google Material Design Icons. As usual, there are icons and logos are not part of the Google Material Design Icons need to be added manually. In one of the case, I am trying to implement the XING Icon in my application, but it fails to display in the application.

XING.js Component

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

Here I am trying to use the Google Matiral Design Icons as well as XING Icon:

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 DATA of 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>

Answer 1

Maybe you need to style the svg ? Like put a height or width on it in the inspector to see ? Or maybe just inspect it to see what height and width it has.

I don't know about Xing but most of the time, there's no width applied to these and you have to specify it in your css (like with FontAwesome)

Answer 2

two issues:

React component must start with Capital letter. So not xing, but Xing.

Apart from that everything is fine, except that you path in svg seems to be corrupted. It does not work regardless whether it's wrapped in component or just directly outlined as svg element. See: https://codesandbox.io/s/frosty-paper-7nbxr?file=/src/App.js

Where did you get that path from?