实现功能

Ant Design项目中自带的<Icon />不能满足要求，其一图表数量太少，其二样式单一，通过引入www.iconfont.cn中提供的图标实现既定功能。

icon的引入有unicode、font-class、symbol三种，其中symbol代表了未来的主流，也是官网推荐用法。我们知道svg引入后可以自定义大小不会变形，特别适合做icon。

本文通过封装一个IconSymbol组件实现离线引入symbol形式的图标

过程

搜索图标

搜索到合适的图标，加入项目中，可以在线更改颜色，点击“下载至本地”按钮
在这里插入图片描述

加入项目

解压后找到iconfont.js文件，放入封装的组件目录，因为我封装的组件名叫IconSymbol，所以放在同级目录中
在这里插入图片描述

封装组件

代码如下：其中name是图标在项目中的名称，style是图标大小

import React, {
    
     Fragment, PureComponent } from 'react';
import PropTypes from 'prop-types';

require('./iconfont');

class IconSymbol extends PureComponent {
    
    
  static propTypes = {
    
    
    name: PropTypes.string,
    className: PropTypes.object,
  };

  static defaultProps = {
    
    
    name: '',
    className: {
    
    
      // width: 50,
      // height: 50,
      verticalAlign: -0.15,
      fill: 'currentColor',
      overflow: 'hidden',
    },
  };

  render() {
    
    
    const {
    
     name, className, style } = this.props;

    return (
      <Fragment>
        <svg className={
    
    className} aria-hidden="true" style={
    
    style}>
          <use xlinkHref={
    
    `#${
      
      name}`} />
        </svg>
      </Fragment>
    );
  }
}

export default IconSymbol;

具体使用

直接使用IconSymbol组件，传入name和style属性

   <IconSymbol name=“icon-co” style={
    
    {
    
    width:64}} />
   <IconSymbol name=“icon-mei” style={
    
    {
    
    width:64}} />

效果

如图：
在这里插入图片描述

其它细节

因为iconfon.js格式问题，eslint提交会报错，在项目根目录下建立.eslintignore文件，屏蔽iconfont.js检查

/lambda/
/scripts
/config
**/iconfont.js

Ant Design离线引入Symbol实现Icon

文章目录