环境
框架：vue3
组件库：ant-design-vue 3.x
iconfont平台：https://www.iconfont.cn
在线项目管理项目图标库
问题
一般我们会使用ant-design-vue给出的在线iconfont方案进行图标管理，如下：
import { createFromIconfontCN } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
export default defineComponent({
setup() {
return () => <MyIcon type="icon-dianzan" />;
},
});
具体参考：https://3x.antdv.com/components/icon-cn/#Icon
但这个方式一般用于开发环境，当项目上线，如果部署在内网或者iconfont.cn网站故障，将导致项目icon不可用。
为了避免，我们一般将文件下载到本地项目中进行打包使用。
网上对于这个问的解决方法，大多是下载iconfont文件到本地，然后将.css和.ttf文件引入项目。
那么如何继续用iconfont.js这种和在线情况一样的文件类型呢？
方法比较简单，将js文件下载，放置于public文件夹下，然后在vue项目的index.html的<head>中引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>xxxx</title>
<script src="/iconfont.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
注意点
这样引用必须将文件放置于public文件夹下，并且引入是src="/iconfont.js"，否则会造成在其它页面找不到iconfont.js资源（404），导致图标不显示。
以上。
鉴于本人经验有限，以上问题可能理解不到位或有错误，如有发现请各位评论指正，避免误导更多人。
