SVG图标使用

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'
   />