React - import multiple svgs in a single file

Question

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'.

user_11511722 · Answer

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:

React - import multiple svgs in a single file

1 Answers