iconfont的symbol引用方式如何在vue-cli中使用

发布于 2022-09-07 12:14:50 字数 597 浏览 11 评论 0

最近在在使用vue-cli做项目,阿里图标库推荐的symbol引用方式没办法直接在项目中使用。看了下iconfont.js这个文件,发现是一个匿名的立即执行函数

clipboard.png

然后做了点简单的改造,改成普通的具名的声明式函数,然后用export导出

clipboard.png

然后在对应的页面引用,并且在created或者mounted里调用一下这个函数

clipboard.png

clipboard.png

这样子弄得话 图标倒也能够正常的显示,但是总是感觉怪怪的。请问这是不是正确的姿势?有没有更好的解决办法?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

远昼 2022-09-14 12:14:50

你如果确实是按照原生的写法引入svg的化,可以专门维护一个svg symbol标签的vue组件,然后在入口处添加到页面上,比如main.vue中,只要把svg标签扔到了页面中就可以使用symbol 了,如果还嫌写 <svg> <use xxx> 麻烦的话可以把这个也写成一个动态组件,图在下面

图片描述

图片描述

使用效果

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文