学习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不会更新