SVG 在 React 的 StoryBook 设置中不起作用

Question

我的 React 组件中有一个 SVG，该组件工作正常。现在，我已经为该组件设置了故事书。但我遇到一个问题，说 'Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/utils/assets/Logo.svg') 不是有效名称。'。我将我的 SVG 存储在 rootDirectory/utils/assets/Logo.svg 文件夹下。以下是组件和故事书文件：

header.jsx

import React from 'react';
import { styles } from './headerStyles';
import Logo from '../../utils/assets/Logo.svg';

const Header = () => {
  const classes = styles();
  return (
    <>
       <Logo className={classes.Logo} />
    </>
  );
};

export default Header;

header.stories.js

import React from 'react';
import Header from '../components/Header';

export default {
  title: 'Header',
  component: Header,
};

const Template = (args) => <Header {...args} />;

export const mainHeader = Template.bind({});

mainHeader.args = {};

我该如何解决这个问题？

Answer 1

我已将 SVG 转换为 React 组件并在 header.jsx 中使用了它。这解决了问题。

SVG 在 React 的 StoryBook 设置中不起作用

SVG not working in StoryBook setup for React

svg

reactjs

storybook