SVG图标
// helper.js 文件
/**
* @param {string | string[] | undefined} color
* @param {number} index
* @param {string} defaultColor
* @return {string}
*/
export const getIconColor = (color, index, defaultColor) => {
return color
? (
typeof color === 'string'
? color
: color[index] || defaultColor
)
: defaultColor;
};
path标签的d属性可以从iconfont获取
import React from 'react';
import { getIconColor } from './helper';
const DEFAULT_STYLE = {
display: 'block',
};
const IconiconBtnCheckboxNor = ({ size, color, style: _style, ...rest }) => {
const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;
return (
<svg viewBox="0 0 1024 1024" width={size + 'rem'} height={size + 'rem'} style={style} {...rest}>
<path d="M807.381333 64A152.618667 152.618667 0 0 1 960 216.618667v590.762666A152.618667 152.618667 0 0 1 807.381333 960H216.618667A152.618667 152.618667 0 0 1 64 807.381333V216.618667A152.618667 152.618667 0 0 1 216.618667 64h590.762666z m0 42.666667H216.618667A109.952 109.952 0 0 0 106.666667 216.618667v590.762666A109.952 109.952 0 0 0 216.618667 917.333333h590.762666A109.952 109.952 0 0 0 917.333333 807.381333V216.618667A109.952 109.952 0 0 0 807.381333 106.666667z" fill={getIconColor(color, 0, '#333333')} />
</svg>
);
};
IconiconBtnCheckboxNor.defaultProps = {
size: 18,
};
export default IconiconBtnCheckboxNor;
// 引入图标文件
import React from 'react';
import IconiconBtnCheckboxNor from './IconiconBtnCheckboxNor';
const IconFont = ({ name, ...rest }) => {
switch (name) {
case 'iconicon_btn_checkbox_nor':
return <IconiconBtnCheckboxNor {...rest} />;
})
export default IconFont;
// 页面上使用
import Iconfont from '../../Iconfont';
<Iconfont
name={'iconicon_btn_checkbox_nor'}
size='2'
color='#BBBDBF'
/>