React - 在单个文件中导入多个 svgs

Question

我有多个 svg 文件，我想将所有这些文件导入和导出到一个文件中：

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

然后我像这样导入它们

MyComponent.jsx

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

但我的组件上出现此错误，无法弄清楚原因：

./src/components/MyComponent/MyComponent.jsx 尝试导入错误：“IconVideoOn”未从“../../components/Icons/icons”导出。

Answer 1

你不能使用export default多个值类型的东西。

要么这样做：

export {
    IconVideoOn,
    IconVideoOff,
    IconMicOn,
    IconMicOff
};

那么你现有的导入工作

或者这样做：

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

export default MySVG;
 

然后像这样导入：

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

并像这样使用：

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