Taro+vue3+nutui微信小程序项目使用icon-font多色图标

  根据nutui文档nut-icon组件的图片链接方式实现多色图标渲染

  • 在使用nutui图标组件(nut-icon)时发现,根据引入的icon-font css文件使用多色图标,渲染效果黑白色
  • 原因:未使用symbol方式引用图标
  • 然后尝试使用symbol方式引入,未果
  • 在尝试过程中找到一个专属taro-icon的插件库(taro-iconfont-cli),但...并不兼容vue,只能留着react项目的时候再用了
  • 最后找到的实现方案:在icon-font下载图标的png格式
  • 将下载好的png图片复制到自己项目的assets文件夹目录下

在组件中使用

<nut-icon size="30" :name="require('../../../assets/images/qianbao.png')"></nut-icon>

 

posted @ 2022-11-03 15:50  莉莉亚亚  阅读(1245)  评论(0)    收藏  举报
Live2D