CODEWITHSUNDEEP
reactjssvgimport
heliosk
heliosk

Reputation: 1161

React - import multiple svgs in a single file

I have multiple svg files and I want to import and export all of them in a single file:

icons.js

import IconVideoOn from '../../assets/img/icons/video-on.svg';
import IconVideoOff from '../../assets/img/icons/video-off.svg';
import IconMicOn from '../../assets/img/icons/mic-on.svg';
import IconMicOff from '../../assets/img/icons/mic-off.svg';
.
.
.

export default {
    IconVideoOn,
    IconVideoOff,
    IconMicOn,
    IconMicOff
};

then I'm importing them like this

MyComponent.jsx

import { IconVideoOn } from '../../components/Icons/icons';

But I'm getting this error on my component, can't figure out why:

./src/components/MyComponent/MyComponent.jsx Attempted import error: 'IconVideoOn' is not exported from '../../components/Icons/icons'.

Upvotes: 3

Views: 5363

Answers (1)

Shubham Verma
Shubham Verma

Reputation: 5054

You cant export default multiple value type thing.

Either do this:

export {
    IconVideoOn,
    IconVideoOff,
    IconMicOn,
    IconMicOff
};

then your existing import works

Or do this:

const MySVG = {
    IconVideoOn,
    IconVideoOff,
    IconMicOn,
    IconMicOff
};

export default MySVG;

Then import like this:

import MySVG from '../../components/Icons/icons';

and use like this:

<img src={MySVG.IconVideoOn} alt=""/>

Upvotes: 7

Related Questions