How to import svg as component

[rimlin]

Using CRA, i was able to import svg like component and inline it: import { ReactComponent as skip } from '../../../assets/icons/skip.svg'; But if i try it, i will get an error:

Error: 'ReactComponent' is not exported by src/assets/icons/skip.svg, imported by src/components/shared/Icon/Icon.component.tsx

If i import like this: import skip from '../../../assets/icons/skip.svg'; i will get link to svg, but i need inline svg code.

[rennerwins]

I'm having the same problem

[ChamseddineBhd]

I'm facing the same problem !!

[bohdanbirdie]

@transitive-bullshit seems like the d.ts file has this described but it fails on the build I assume this should work somehow but don't see the options so far

[bohdanbirdie]

@transitive-bullshit deep apologies for double ping

Just wanted to bring the attention to PR above

Thank you for the great tool!

[DDDDDanica]

Thanks a lot @bohdanbirdie you saved me ! Can't wait to test when it's released ~

[bohdanbirdie]

@DDDDDanica you can use my fork while the package is not published. (or use original git repo) "microbundle-crl": "https://github.com/bohdanbirdie/microbundle.git",

[DDDDDanica]

Hey @bohdanbirdie I wonder if it is babel setting, but when i run storyshots inside the /example src (aka create-react-app), i got this following error:

Any ideas?

[bohdanbirdie]

@DDDDDanica yes, this was also my problem You can only use this syntax

import { ReactComponent as Bell } from '../../assets/svg/bell.svg';

[DDDDDanica]

@bohdanbirdie Hi, So in my Icon component (inside the library), i imported the svg; and in example app, i imported Icon component along with pre-defined svgs. which means:

import { ReactComponent as Bell } from '../../assets/svg/bell.svg';

It happens in Icon component, and in storybook i direct call

<Icon
        type={type}
        name="bell"
      />

It works to generate the stories, but failed in storyshots (jest).

[bohdanbirdie]

It should be like this only. If you want to use a single component (Icon) for that you will need to create it, and map the name prop to appropriate imported SVG component (like { 'bell': Bell }

import { ReactComponent as Bell } from '../../assets/svg/bell.svg';


const MyComp = () => {
  return <Bell />
}

[DDDDDanica]

Thanks @bohdanbirdie Eventually i abandoned storyshots and just append snapshots to component itself. Works for me. Thanks for your help !