学习vite搭建vue3的ts的前端框架，前端采用的是ant版本的vue，选择ant的原因之一是因为阿里家的，同时，对自家的[icon](https://www.iconfont.cn/plus "icon")支持非常友好。主要在icon里面创建一个账号，维护自己的仓库，就可以线上添加icon，项目里面直接使用了。不用导入其他的文件。如果是离线运行的项目，则跳过这个文章吧，因为这个是需要在线加载文件的。

创建全局办的icon模块很简单，只需要在main.ts里面添加几个配置就好。

// 自定义的icon
import { createFromIconfontCN } from '@ant-design/icons-vue';
const Fonts = createFromIconfontCN({
     scriptUrl: '//at.alicdn.com/t/font_3243513_tpd19zgtmy.js'
})

// 然后在vue里面使用对应的模块即可
createApp(App).use(router).use(store).use(Antd).component("LocalIcon", Fonts).mount('#app')

这样，在项目里面，可以直接通过LocalIcon这个标签来直接使用了。项目里面的代码如下:

<local-icon type="icon-liebiao" />

上面的type就是你在icon里面创建仓库的对应的icon的名称。

这样，你可以在线上动态的添加、编辑、修改icon，而项目里面就可以直接用了。

刚测试了一下，修改icon之后，需要重新生成连接，否则icon不会更新