定義一個自定義圖標組件，代碼如下
import React from 'react';
import {Icon} from 'antd';
const UserIconSvg = () => (
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1">
<g id="頁面1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="登錄" transform="translate(-470.000000, -270.000000)" fill="#D0D0D0" fillRule="nonzero">
<g id="編組" transform="translate(458.000000, 257.000000)">
<g id="account-2" transform="translate(12.000000, 13.000000)">
<g id="account">
<path d="M7,1.66300025 C7.6562969,1.66300025 8.26274024,2.01313046 8.59088869,2.58150023 C8.91903714,3.14987 8.91903714,3.85013043 8.59088869,4.4185002 C8.26274024,4.98686997 7.6562969,5.33700018 7,5.33700018 C5.98545293,5.33700018 5.16300003,4.51454727 5.16300003,3.50000021 C5.16300003,2.48545316 5.98545293,1.66300025 7,1.66300025 L7,1.66300025 Z M7,9.53800009 C9.599,9.53800009 12.338,10.8150001 12.338,11.3750001 L12.338,12.338 L1.662,12.338 L1.662,11.3750001 C1.662,10.8150001 4.4,9.53700009 6.999,9.53700009 L7,9.53800009 Z M6.99999986,1.42991539e-07 C6.07166096,-0.000265067321 5.18126808,0.368398654 4.52483323,1.02483349 C3.86839837,1.68126834 3.49973465,2.5716612 3.49999986,3.50000014 C3.49999986,5.43400018 5.066,7.00000014 6.99999986,7.00000014 C8.934,7.00000014 10.4999999,5.43400018 10.4999999,3.50000014 C10.4999999,1.56600025 8.934,1.42991539e-07 6.99999986,1.42991539e-07 Z M7,8.00000012 C4.664,8.00000012 0,9.1490001 0,11.4290001 L0,14.0000001 L14,14.0000001 L14,11.4290001 C14,9.1490001 9.336,8.00000012 7,8.00000012 Z" id="形狀"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
);
const LockIconSvg = () => (
<svg width="12px" height="14px" viewBox="0 0 12 14" version="1.1">
<g id="頁面1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="登錄" transform="translate(-470.000000, -336.000000)" fill="#D0D0D0" fillRule="nonzero">
<g id="編組備份" transform="translate(458.000000, 323.000000)">
<g id="lock-2" transform="translate(12.000000, 13.000000)">
<g id="lock">
<path d="M1.2,6.416375 L1.2,12.833625 L10.8,12.833625 L10.8,6.416375 L1.2,6.416375 Z M0,5.25 L12,5.25 L12,14 L0,14 L0,5.25 Z M5.4,9.760625 C5.04171429,9.559375 4.8,9.18225 4.8,8.75 C4.8,8.106 5.33742857,7.583625 6,7.583625 C6.66257143,7.583625 7.2,8.106 7.2,8.75 C7.2,9.18225 6.95828571,9.5585 6.6,9.760625 L6.6,11.346125 C6.6,11.6843994 6.33137085,11.958625 6,11.958625 C5.66862915,11.958625 5.4,11.6843994 5.4,11.346125 L5.4,9.760625 L5.4,9.760625 Z M3.6,5.25 L8.4,5.25 L8.4,3.5 C8.4,2.211125 7.32514286,1.166375 6,1.166375 C4.67485714,1.166375 3.6,2.211125 3.6,3.5 L3.6,5.25 Z M6,0 C7.98857143,0 9.6,1.56625 9.6,3.5 L9.6,5.25 L2.4,5.25 L2.4,3.5 C2.4,1.56625 4.01142857,0 6,0 Z" id="形狀"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
);
const FileIconSvg = () => (
<svg width="12px" height="14px" viewBox="0 0 12 14" version="1.1">
<g id="頁面1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="首頁" transform="translate(-91.000000, -171.000000)" fill="#FFFFFF" fillRule="nonzero">
<g id="編組-4" transform="translate(74.000000, 162.000000)">
<g id="file-plus-2" transform="translate(17.000000, 9.000000)">
<g id="file-plus">
<path d="M9.14152388,10.231375 L9.14152388,8.54 L10.3087131,8.54 L10.3087131,10.231375 L12,10.231375 L12,11.39775 L10.3087131,11.39775 L10.3087131,13.09 L9.14152388,13.09 L9.14152388,11.39775 L7.45023697,11.39775 L7.45023697,10.231375 L9.14152388,10.231375 Z M6.03718556,12.833625 L6.03718556,14 L0,14 L0,4.097625 L0.00437477215,4.097625 L3.98366752,0 L10.2369668,0 L10.2369668,7 L9.16514765,7 L9.16514765,1.166375 L5.18410499,1.166375 L5.18410499,5.233375 L5.18323004,5.233375 L5.18323004,5.235125 L1.20306234,5.235125 L1.20306234,12.833625 L6.03718556,12.833625 Z M1.67553773,4.097625 L4.04666424,4.097625 L4.04666424,1.656375 L1.67553773,4.097625 Z" id="形狀"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
);
const CutIconSvg = () => (
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1">
<g id="頁面1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="首頁" transform="translate(-100.000000, -243.000000)" fill="#FFFFFF" fillRule="nonzero">
<g id="編組-7" transform="translate(74.000000, 214.000000)">
<g id="cut-2" transform="translate(26.000000, 29.000000)">
<g id="cut">
<path d="M2.916375,11.083625 L11.083625,11.083625 L11.083625,2.916375 L2.916375,2.916375 L2.916375,11.083625 Z M2.916375,12.25 L2.916375,14 L1.75,14 L1.75,12.25 L0,12.25 L0,11.083625 L1.75,11.083625 L1.75,1.75 L11.083625,1.75 L11.083625,0 L12.25,0 L12.25,1.75 L14,1.75 L14,2.916375 L12.25,2.916375 L12.25,12.25 L2.916375,12.25 Z" id="形狀"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
);
const TableIconSvg = () => (
<svg width="14px" height="14px" viewBox="0 0 14 14">
<g id="頁面1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="首頁" transform="translate(-246.000000, -25.000000)" fill="#FFFFFF" fillRule="nonzero">
<g id="編組-3">
<g id="編組-2" transform="translate(222.000000, 0.000000)">
<g id="wenzishibie___-2" transform="translate(24.000000, 25.000000)">
<g id="wenzishibie___">
<path d="M1,1 L1,3 L0,3 L0,0 L3,0 L3,1 L1,1 Z M1,13 L3,13 L3,14 L0,14 L0,11 L1,11 L1,13 Z M13,13 L13,11 L14,11 L14,14 L11,14 L11,13 L13,13 Z M13,1 L11,1 L11,0 L14,0 L14,3 L13,3 L13,1 Z M3.015625,3 L11.015625,3 L11.015625,5 L3.015625,5 L3.015625,3 Z M6.015625,5 L8.015625,5 L8.015625,12 L6.015625,12 L6.015625,5 Z" id="形狀"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
);
const ScanIconSvg = () => (
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1">
<g id="頁面1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="首頁" transform="translate(-1107.000000, -171.000000)" fill="#FFFFFF" fillRule="nonzero">
<g id="編組-4備份-2" transform="translate(1090.000000, 162.000000)">
<g id="scan-2" transform="translate(17.000000, 9.000000)">
<g id="scan">
<path d="M12.833,12.833 L12.833,8.75 L14,8.75 L14,14 L8.75,14 L8.75,12.833 L12.833,12.833 Z M0,12.833 L0,8.75 L1.167,8.75 L1.167,12.833 L5.25,12.833 L5.25,14 L0,14 L0,12.833 Z M14,1.167 L14,5.25 L12.833,5.25 L12.833,1.167 L8.75,1.167 L8.75,0 L14,0 L14,1.167 Z M1.167,1.167 L1.167,5.25 L0,5.25 L0,0 L5.25,0 L5.25,1.167 L1.167,1.167 Z M0,6.417 L14,6.417 L14,7.583 L0,7.583 L0,6.417 Z" id="形狀"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
);
const UserWhiteIconSvg = () => (
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1">
<g id="頁面1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="首頁" transform="translate(-1160.000000, -25.000000)" fill="#FFFFFF" fillRule="nonzero">
<g id="編組-3">
<g id="account-2" transform="translate(1160.000000, 25.000000)">
<g id="account">
<path d="M7,1.66300025 C7.6562969,1.66300025 8.26274024,2.01313046 8.59088869,2.58150023 C8.91903714,3.14987 8.91903714,3.85013043 8.59088869,4.4185002 C8.26274024,4.98686997 7.6562969,5.33700018 7,5.33700018 C5.98545293,5.33700018 5.16300003,4.51454727 5.16300003,3.50000021 C5.16300003,2.48545316 5.98545293,1.66300025 7,1.66300025 L7,1.66300025 Z M7,9.53800009 C9.599,9.53800009 12.338,10.8150001 12.338,11.3750001 L12.338,12.338 L1.662,12.338 L1.662,11.3750001 C1.662,10.8150001 4.4,9.53700009 6.999,9.53700009 L7,9.53800009 Z M6.99999986,1.42991539e-07 C6.07166096,-0.000265067321 5.18126808,0.368398654 4.52483323,1.02483349 C3.86839837,1.68126834 3.49973465,2.5716612 3.49999986,3.50000014 C3.49999986,5.43400018 5.066,7.00000014 6.99999986,7.00000014 C8.934,7.00000014 10.4999999,5.43400018 10.4999999,3.50000014 C10.4999999,1.56600025 8.934,1.42991539e-07 6.99999986,1.42991539e-07 Z M7,8.00000012 C4.664,8.00000012 0,9.1490001 0,11.4290001 L0,14.0000001 L14,14.0000001 L14,11.4290001 C14,9.1490001 9.336,8.00000012 7,8.00000012 Z" id="形狀"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
);
const UserIcon = props => <Icon component={UserIconSvg} {...props} />;
const LockIcon = props => <Icon component={LockIconSvg} {...props} />;
const FileIcon = props => <Icon component={FileIconSvg} {...props} />;
const CutIcon = props => <Icon component={CutIconSvg} {...props} />;
const TableIcon = props => <Icon component={TableIconSvg} {...props} />;
const ScanIcon = props => <Icon component={ScanIconSvg} {...props} />;
const UserWhiteIcon = props => <Icon component={UserWhiteIconSvg} {...props} />;
const MyIcon = (props) => {
const {type} = props;
if(type === "i-user"){
return <UserIcon {...props} />;
}
else if(type === "i-lock"){
return <LockIcon {...props} />;
}
else if(type === "i-file"){
return <FileIcon {...props} />;
}
else if(type === "i-cut"){
return <CutIcon {...props} />;
}
else if(type === "i-scan"){
return <ScanIcon {...props} />;
}
else if(type === "i-table"){
return <TableIcon {...props} />;
}
else if(type === "i-user-white"){
return <UserWhiteIcon {...props} />;
}
else{
return <UserIcon {...props} />;
}
}
export default MyIcon;
在需要使用的地方引入使用：
import MyIcon from '../components/MyIcon/MyIcon';
export default [
{
path: '/ceshi',
name: 'ceshi',
icon: <MyIcon type="i-table" />
}
]