首页 > 编程语言 >Taro+vue3+nutui微信小程序项目使用icon-font多色图标

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

时间:2022-11-03 15:55:53浏览次数:45  
标签:Taro 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>

 

标签:Taro,nutui,微信,使用,icon,font,多色,图标
From: https://www.cnblogs.com/xxjmpb/p/16854736.html

相关文章