如何将我自己的图标导入我的函数iconNameFromType？

Question

我有组件与地图，它呈现每种类型不同的图标和计数：

                    <div className="Items">
                        {doctypes && <React.Fragment>
                            {doctypes.map(({ type, count }) => {
                                return(
                                    <div onClick={() => {
                                        this.props.rootStore.navToSecondScreen(type);
                                        }}>
                                        <Statistic inverted>
                                            <Statistic.Value >
                                                <Icon className={iconNameFromType(type)}/>

                                                <p className="count">{count}</p>
                                            </Statistic.Value>
                                            <Statistic.Label>
                                                <p className="type">{type}</p>
                                            </Statistic.Label>
                                        </Statistic>
                                    </div>  
                                );
                            })}
                        </React.Fragment>}
                    </div>

我想用我自己的图标替换语义图标，但我怎样才能将它们放在const mapping = {}中，就像我在下面尝试过的那样？或者还有其他一些版本，怎么做？

import { SemanticICONS } from "semantic-ui-react";

const html = require ("~/src/assets/html.png");
const pdf = require ("~/src/assets/pdf.png");


//WHAT I HAVE
export function iconNameFromType(type): SemanticICONS {
    const mapping = {
        'e-mail': 'file alternate outline',
        'document': 'file word outline',
        'table': 'file excel outline',
        'pdf': 'file pdf outline',
    }

    if (mapping[type]) {
        return mapping[type];
    }
    else {
        return 'question circle outline';
    }
}



//I WANT SOMETHING LIKE THIS.
export function myIconNameFromType(type) {
    const mapping = {
        'html': {html},
        'pdf': {pdf},
    }

    if (mapping[type]) {
        return mapping[type];
    }
}

Answer 1

我已经完成了相同的事情但是使用css代替Icon组件用于某些自定义图标因为你想要编辑图标/颜色，你需要在本地安装所有内容，与他们的代码对抗并重新编译它。如果你只是需要一些自定义图标尝试简单的CSS到像我这样的div：

.battery_custom_icom_sample:before {
    content: "\F240" !important;
    color: #c1bcbc2b;
    font-size: 130px;
    padding-top: 66px;
}

编辑：

//you have to npm i lodash
import _ from 'lodash'

const mapping = [    
    {type:'e-mail', className:'custom1'},
    {type:'document', className: 'custom2'},
    {type:'table', className: 'custom3'},
    {type:'pdf', className: 'custom4'}
]


export function myIconNameFromType(type) {
   return  _.find(mapping, (i) => i.type === type).className
}

或没有lodash：

export function myIconNameFromType(type) {
   return mapping.filter(function (el) {
         return el.type === type
   }).className
}

所以：

<Icon className={this.myIconNameFromType(type)} />