我有带有map的组件,它呈现为每种类型的不同图标和计数:
<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>
我想用我自己的图标替换语义图标,但是我怎样才能将它们放在常量映射 = {} 中,就像我在下面尝试的那样?或者还有其他一些版本,该怎么做?
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];
}
}
我已经做了同样的事情,但使用 css 代替 图标组件作为一些自定义图标 如果要编辑图标/颜色,则必须在本地安装所有内容,与它们的代码作斗争并重新编译它。 如果您只需要一些自定义图标,请尝试像我一样使用简单的 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
}
或不带洛达什:
export function myIconNameFromType(type) {
return mapping.filter(function (el) {
return el.type === type
}).className
}
所以:
<Icon className={this.myIconNameFromType(type)} />