react+ umi 使用iconfont,实现更改图标颜色

1.线上引用，这种无法更改图标颜色
如果想要自定义图标颜色，只需要对图标进行批量去色操作就可以了
（批量操作-选中图标-批量去色）

然后复制Symbol，引入到项目中

import { createFromIconfontCN } from '@ant-design/icons'

const IconFont = createFromIconfontCN({ 
   scriptUrl: '//at.alicdn.com/t/font_2242890_ffxnfeb837a.js'
});

2.下载到本地


将下载下来的文件夹放到assets文件夹下，自己命名一个名称

将iconfont.js文件提取出来放到public文件夹下
此时页面引入就可以用了

路由中直接写上图标的引入就可以

import { createFromIconfontCN } from '@ant-design/icons'

const IconFont = createFromIconfontCN({
    scriptUrl: 'iconfont.js',
 });

menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || !menuItemProps.path) {
          return defaultDom;
        }
        return <Link className={`${menuItemProps.pro_layout_parentKeys.length === 0 ? '' : 'go_link'}`} to={menuItemProps.path}>{defaultDom}</Link>;
      }}
      subMenuItemRender={(TWTProps) => {
        return (
            <>
                <span className="ant-pro-menu-item">
                    <span role="img" className="anticon">
                        {TWTProps.icon && < IconFont type={TWTProps.icon.toString()} />}
                    </span>
                    <span>
                        {TWTProps.name}
                    </span>
                </span>
  
            </>
        )
 }}

然后我们会发现图标的颜色无法更改，这是我们找到public下面的iconfont.js文件，将里面的fill都设置为空就可以了

（这种会出现图标时有时无的问题，所以最简单的还是第一种方法，对图标进行批量去色）