Reactjs 为什么尝试在按钮内部呈现svg图像时崩溃

我创建了一个带有自定义按钮的库。按钮文件夹包含24个svg文件

从project中，我传递了一个文本、一个函数和图标，但在尝试渲染图标时崩溃并显示下一个错误：

index.js:1警告：React.createElement:type无效--应为字符串（对于内置组件）或类/函数（对于复合组件），但Get:undefined。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

我不知道为什么不渲染图像，有人能帮我吗

这是我的密码：

import React from "react";
import PropTypes from "prop-types";

import { ReactComponent as ArrowIcon } from './arrow_icon.svg';
import { ReactComponent as ArrowRight } from './arrow_right_icon.svg';
import { ReactComponent as ArrowIcon2 } from './arrow2_icon.svg';
import { ReactComponent as BellPlusIcon } from './bell_plus_icon.svg';
import { ReactComponent as ChartIcon } from './chart_icon.svg';
import { ReactComponent as ChartLineSolidIcon } from './chart_line_solid_icon.svg';
import { ReactComponent as CloseIcon } from './close_icon.svg';
import { ReactComponent as CogIcon } from './cog_icon.svg';
import { ReactComponent as DeleteIcon } from './delete_icon.svg';
import { ReactComponent as DownloadIcon } from './download_icon.svg';
import { ReactComponent as EarsIcon } from './ears_icon.svg';
import { ReactComponent as EditIcon } from './edit_icon.svg';
import { ReactComponent as ExportIcon } from './export_icon.svg';
import { ReactComponent as FilterIcon } from './filter_icon.svg';
import { ReactComponent as LocationIcon } from './location_icon.svg';
import { ReactComponent as LogoutIcon } from './logout_icon.svg';
import { ReactComponent as MapIcon } from './map_icon.svg';
import { ReactComponent as PlusIcon } from './plus_icon.svg';
import { ReactComponent as ServerIcon } from './server_icon.svg';
import { ReactComponent as TagIcon } from './tag_icon.svg';
import { ReactComponent as TiresiasIcon } from './tiresias_icon.svg';
import { ReactComponent as UsersCogIcon } from './users_cog_icon.svg';
import { ReactComponent as VGeneralIcon } from './vgeneral_icon.svg';


import 'bootstrap/dist/css/bootstrap.css';
import 'react-spinkit/css/three-bounce.css';

import './go-button.scss';

class Button extends React.PureComponent {

    handleClick = (e) => {
        e.stopPropagation();
        this.props.clickButton();
    }

    getIcon = (nameIcon) => {
        switch(nameIcon.toLowerCase()) {
            case 'arrow': return <ArrowIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'arrow_right': return <ArrowRight style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'arrow2': return <ArrowIcon2 style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'bell-plus': return <BellPlusIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'chart': return <ChartIcon style={{ display: 'inline' }} className={"go-button__icon"} />
            case 'chart-line-solid': return <ChartLineSolidIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'close': return <CloseIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'cog': return <CogIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'delete': return <DeleteIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'download': return <DownloadIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'ears': return <EarsIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'edit': return <EditIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'export': return <ExportIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'filter': return <FilterIcon style={{ display: 'inline' }} className={"go-button__icon"} />
            case 'location': return <LocationIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'logout': return <LogoutIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'map': return <MapIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'plus': return <PlusIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'server': return <ServerIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'tag': return <TagIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'tiresias': return <TiresiasIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'users-cog': return <UsersCogIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            case 'vgeneral': return <VGeneralIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            default:
                return null;
        }
    }

    render() {

        return (
            <button
                disabled={this.props.disabled}
                type={this.props.type}
                className={`${this.props.className} go-button ${(this.props.active) ? '--active' : ''} 
                    --${this.props.theme} ${(this.props.outline) ? '--outline' : ''} 
                    --${this.props.size} ${(this.props.primary) ? '--primary' : ''} ${(this.props.circular) ? '--circular' : ''}`}
                onClick={this.handleClick}
                style={this.props.style}
                id={this.props.id}
            >
                { this.props.icon && this.getIcon(this.props.icon) }

                {!this.props.circular &&
                    <span>{this.props.text}</span>
                }

                {this.props.loading &&
                    <div className="c-spinner-animation w-100">
                        <div className="bounce1" />
                        <div className="bounce2" />
                        <div className="bounce3" />
                    </div>
                }
            </button>
        );
    }
}

export default Button

从“React”导入React；
从“道具类型”导入道具类型；
从“./arrow_icon.svg”导入{ReactComponent as ArrowIcon}；
从“./arrow_right_icon.svg”导入{ReactComponent as ArrowRight}；
从“./arrow2_icon.svg”导入{ReactComponent as ArrowIcon2}；
从“./bell_plus_icon.svg”导入{ReactComponent as BellPlusIcon}；
从“./chart_icon.svg”导入{ReactComponent as ChartIcon}；
从“./chart_line_solid_icon.svg”导入{ReactComponent as chartlinesolidcon}；
从“./close_icon.svg”导入{ReactComponent as CloseIcon}；
从“./cog_icon.svg”导入{ReactComponent as CogIcon}；
从“./delete_icon.svg”导入{ReactComponent as DeleteIcon}；
从“./download_icon.svg”导入{ReactComponent as DownloadIcon}；
从“/ears_icon.svg”导入{ReactComponent as EarsIcon}；
从“./edit_icon.svg”导入{ReactComponent as EditIcon}；
从“./export_icon.svg”导入{ReactComponent as ExportIcon}；
从“./filter_icon.svg”导入{ReactComponent as FilterIcon}；
从“./location_icon.svg”导入{ReactComponent as LocationIcon}；
从“./logout_icon.svg”导入{ReactComponent as LogoutIcon}；
从“./map_icon.svg”导入{ReactComponent as MapIcon}；
从“./plus_icon.svg”导入{ReactComponent as PlusIcon}；
从“./server_icon.svg”导入{ReactComponent as ServerIcon}；
从“./tag_icon.svg”导入{ReactComponent as TagIcon}；
从“/tiresias_icon.svg”导入{ReactComponent as TiresiasIcon}；
从“/users\u cog\u icon.svg”导入{ReactComponent as UsersCogIcon}；
从“./vgeneral_icon.svg”导入{ReactComponent as VGeneralIcon}；
导入'bootstrap/dist/css/bootstrap.css'；
导入'react spinkit/css/three bounce.css'；
导入“./go-button.scss”；
类按钮扩展了React.PureComponent{
handleClick=（e）=>{
e、 停止传播（）；
this.props.clickButton（）；
}
getIcon=（名称图标）=>{
开关（nameIcon.toLowerCase（））{
案例“箭头”：返回；
案例“向右箭头”：返回；
案例“arrow2”：返回；
案例“bell plus”：返回；
案例“图表”：返回
案例“实线图表”：返回；
案例“关闭”：返回；
案例“cog”：返回；
案例“删除”：返回；
案例“下载”：返回；
案例“耳朵”：返回；
案例“编辑”：返回；
案例“出口”：退货；
案例“筛选器”：返回
案例“位置”：返回；
案例“注销”：返回；
案例“映射”：返回；
案例“加”：返回；
案例“服务器”：返回；
案例“tag”：返回；
案例“tiresias”：返回；
案例“用户cog”：返回；
案例“vgeneral”：返回；
违约：
返回null；
}
}
render（）{
返回(
{this.props.icon&&this.getIcon（this.props.icon）}
{！这是道具&&
{this.props.text}
}
{this.props.loading&&
}
);
}
}
导出默认按钮

最后，我添加了SVG作为组件，效果非常好

const ArrowIcon = props => {

    return (
     <svg className={className} style={style} ....></svg>
    )
}

export default ArrowIcon;

const ArrowIcon=props=>{
返回(
)
}
导出默认箭头图标；

在按钮组件中：

从“/SVGComponents/arrow_icon”导入箭头图标

和在交换机中：

 getIcon = (nameIcon) => {
        switch(nameIcon.toLowerCase()) {
            case 'arrow': return <ArrowIcon style={{ display: 'inline' }} className={"go-button__icon"} />;
            default:
                return null;
        }
 }

getIcon=（nameIcon）=>{
开关（nameIcon.toLowerCase（））{
案例“箭头”：返回；
违约：
返回null；
}
}

transpiler未正确导入SVG。你的网页配置中有SVG加载器吗？没有，我没有SVG加载器。。怎么能做到呢？？