请问在uni-app中如何使用阿里巴巴矢量库的多色图标

分类：uni-app

uniapp

我在main.js中是这样引入的

import '@/static/iconfont/iconfont.js'

在浏览器上可以正常显示图标

然而在微信小程序中却显示这样的错误

thirdScriptError   
 sdk uncaught third Error   
 Cannot read property 'getElementsByTagName' of undefined   
 TypeError: Cannot read property 'getElementsByTagName' of undefined  
    at http://127.0.0.1:35902/appservice/common/main.js:132:28  
    at Object.CUsersAdministratorDocumentsHBuilderProjectsTestComponentsIconfontIconfontJs (http://127.0.0.1:35902/appservice/common/main.js:163:6)  
    at __webpack_require__ (http://127.0.0.1:35902/appservice/common/runtime.js:98:31)  
    at Object.CUsersAdministratorDocumentsHBuilderProjectsTestMainJs (http://127.0.0.1:35902/appservice/common/main.js:180:5)  
    at __webpack_require__ (http://127.0.0.1:35902/appservice/common/runtime.js:98:31)  
    at checkDeferredModules (http://127.0.0.1:35902/appservice/common/runtime.js:61:26)  
    at Array.webpackJsonpCallback [as push] (http://127.0.0.1:35902/appservice/common/runtime.js:46:20)  
    at http://127.0.0.1:35902/appservice/common/main.js:3:57  
    at require (http://127.0.0.1:35902/appservice/__dev__/WAService.js:1:1016120)  
    at http://127.0.0.1:35902/appservice/__dev__/WAService.js:1:1015729

2019-04-30 16:40 负责人:无分享

6 个回复

望

我也遇到了这个问题，请问楼主解决了吗

1***@qq.com (作者)

没有啊，目前还是用图片的方式

2019-05-10 16:01

香蕉不是笨啦啦 - 哈哈哈

只支持前两种方法使用

1***@qq.com (作者)

这就有点难受了

2019-05-10 16:00

1***@qq.com

请问最后作者如何解决的此问题，我当前的处境和你一样

1***@qq.com (作者)

用图片呀

2019-09-11 17:23

倒影 - 记忆的时间差.

同问

1***@qq.com

解决了吗

2019-08-23 15:55

tomy_li

小程序是不支持dom操作的，正好iconfont.js中有dom操作，楼主的做法恰恰引发了错误。
正确姿势：
1、App.vue中引入

<style>  
    /*每个页面公共css */  
@import url("./static/fonts/iconfont/iconfont.css");  
</style>

2、删掉 XXX/iconfont/iconfont.js文件
亲测有效。
楼主之所以这样用我怀疑是被二次封装的iconfont组件误导，你是原生态iconfont，不需要这样做

8***@qq.com

楼主要用多色图标所以这样引入

2020-08-03 17:10
tomy_li

回复 8***@qq.com: 字体图标不是可以设置颜色？

2020-08-13 22:20
喵小白

回复 tomy_li: 字体图标是可以设置颜色，但是这还是单色图。多色图指的是一个字体有多种颜色，甚至渐变色

2020-10-09 10:28

云淡风轻gfg

请问楼主解决了吗

tomy_li

可以参考上面我的回复，我也是相同的问题，已经解决

2020-05-15 15:32

该问题目前已经被锁定, 无法添加新回复

请问在uni-app中如何使用阿里巴巴矢量库的多色图标

6 个回复

公告

相关问题

请问在uni-app中如何使用阿里巴巴矢量库的多色图标

与内容相关的链接

6 个回复

公告

相关问题