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

回答1:

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=""/>

来源：https://stackoverflow.com/questions/63647648/react-import-multiple-svgs-in-a-single-file