vue3 antdv 定义全局的icon

        学习vite搭建vue3的ts的前端框架,前端采用的是ant版本的vue,选择ant的原因之一是因为阿里家的,同时,对自家的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不会更新

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值