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

【问题标题】：React - import multiple svgs in a single fileReact - 在单个文件中导入多个 svg
【发布时间】：2020-12-18 04:56:53
【问题描述】：

我有多个 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”导出。

【问题讨论】：

标签： reactjs svg import

【解决方案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=""/>

【讨论】：