Как импортировать мои собственные значки в мою функцию 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;
}

edit:

//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)} />