react/antd-pro本地引入iconfont

在网上找了很多例子,但是都不好用.

1.第一种实现方式需要引入 antd的Icon组件,但是antd4.0版本已经弃用了
const IconFont = Icon.createFromIconfontCN({ scriptUrl: iconFont })
2.第二种实现方式需要在 defaultSettings.ts 的iconfontUrl 中填入链接,但是我的没有实现,所以放弃了

const proSettings: DefaultSettings = {
  navTheme: 'dark',
  primaryColor: '#1890ff',
  layout: 'sidemenu',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: false,
  colorWeak: false,
  menu: {
    locale: true,
  },
  title: 'SPM',
  pwa: false,
  iconfontUrl: '',// 这里填入iconfont的cdn链接
};

**

最终方案:

**
在global.tsx(main)引入css和js

import '../src/assets/iconfont/iconfont.css'
import '../src/assets/iconfont/iconfont.js'

css文件添加默认样式

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

在页面使用

<svg className={styles.icon} aria-hidden="true">
  <use xlinkHref="#icon-pdf"></use>
</svg>

我引入的是 symbol ,所以用svg.其它方式自行使用.
如果有帮助麻烦登录点个赞.谢谢