Встроенные SVG в компонентах React не отображаются

Question

У меня есть svg внутри функционального компонента React:

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;

Это ничего не отображает, если правильно импортировать и использовать в другом компоненте. У меня есть другие встроенные svgs в других компонентах, которые работают нормально.

Я пытаюсь редактировать svgs в Illustrator, и независимо от того, как я сохраняю или экспортирую, результат никогда не будет совместим с React при встраивании. Вот пример пути svg, созданного в Illustrator, который не будет работать встроенным в 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"/>

Каковы требования к синтаксису для встроенных svgs React? Действительно полезно динамически изменять свойства svg и анимировать с помощью GSAP, но я не могу этого сделать, если svgs не будет работать надежно?

Answer 1

Вы должны вызвать lo go в Lo go return return. Если вы вернете только ссылку lo go, как в вашем коде, то это не будет действительный компонент React.

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();
}

svg определенно есть, но ему нужно немного стиля: https://codesandbox.io/s/heuristic-newton-m6js9

Answer 2

Это должно быть похоже на return logo();. Поскольку logo здесь является функцией, и вам нужно вызывать ее как logo();

Вызов только return logo не будет работать, здесь logo - это функция, а не переменная. Таким образом, правильный синтаксис для вызова функции: function_name, за которым следует ().

Проверьте реализацию стекаблица Ссылка стекаблица

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 = "red" /
    >
    </svg>
  );

  return logo();
}