Inline SVGs in React components not showing

Question

I have an svg inside a React functional component:

import React, { useEffect } from 'react';

import './logo.css';

function Logo({}) {


    const logo = () => (
        <svg width="130" height="144" viewBox="0 0 130 144">
            <path
                d="M59.1046 143.548V143.404C57.8398 143.404 56.575 143.404 55.3262 143.26L57.6316 134.486H59.0726C62.5047 134.488 65.926 134.101 69.2711 133.333V142.491C65.8988 143.135 62.4737 143.462 59.0405 143.468V143.612"
                fill="white"
            />
        </svg>
    );

    return { logo };
}

export default Logo;

This does not display anything when correctly imported and used in another component. I have other inline svgs in other components that are working fine.

I try editing svgs in Illustrator and no matter how I save or export, the result is never compatible with React when inlining. Here is an example of an svg path created in Illustrator that will not work inline in React:

<path d="M103.42,120.08l-6.66-6.25a32.92,32.92,0,0,0,3.39-9.06l8.15,4.1A40.69,40.69,0,0,1,103.42,120.08Z"/>

What are the syntax requirements for inline React svgs? It is really useful to dynamically change svg properties and animate with GSAP, but I can't do that if the svgs will not work reliably?

Answer 1

You have to invoke logo in Logo return statement. If you return just the logo reference as in your code, then it will be not a valid React component.

function Logo() {
  const logo = () => (
    <svg width="130" height="144" viewBox="0 0 130 144">
      <path
        d="M59.1046 143.548V143.404C57.8398 143.404 56.575 143.404 55.3262 143.26L57.6316 134.486H59.0726C62.5047 134.488 65.926 134.101 69.2711 133.333V142.491C65.8988 143.135 62.4737 143.462 59.0405 143.468V143.612"
        fill="white"
      />
    </svg>
  );

  return logo();
}

The svg is definitely there, but it needs some styling: https://codesandbox.io/s/heuristic-newton-m6js9