Question

我有组件：

<Icon name={iconNameFromType(type)}/>

，并且我想用自己的图标替换语义图标，但是如何像下面尝试的那样将它们放在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：

admin users

编辑：

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

如此：

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

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

1 个答案: