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

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 尝试导入错误：从'../../components/Icons/icons'未导出 'IconVideoOn'。

- hirosk

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

- Shubham Verma