SVG not working in StoryBook setup for React

Question

I have a SVG in my react component and the component is working fine. Now, I have setup the storybook for that component. But I am facing an issue saying 'Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/utils/assets/Logo.svg') is not a valid name.'. I am storing my SVG under rootDirectory/utils/assets/Logo.svg folder. Here are the component and storybook files:

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 = {};

How can I fix this?

Answer 1

I have converted the SVG into a react component and used that in header.jsx. That fixed the issue.