React - 在单个文件中导入多个 svg [英] React - import multiple svgs in a single file

问题描述

我有多个 svg 文件，我想在一个文件中导入和导出所有文件:

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

然后我像这样导入它们

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

./src/components/MyComponent/MyComponent.jsx Attempted import error: 'IconVideoOn' is not exported from '../../components/Icons/icons'.

推荐答案

你不能export default 多值类型的东西.

You cant export default multiple value type thing.

要么这样做:

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

这篇关于React - 在单个文件中导入多个 svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！