a***@gmail.com

发布：2024-10-15 16:32
更新：2024-10-15 19:07
阅读：180

【报Bug】uni-icon通过 fontFamily 自定义图标文档用法错误

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 15.0

HBuilderX类型：正式

HBuilderX版本号： 4.24

第三方开发者工具版本号： 1.06.2409131

基础库版本号： 3.5.8

项目创建方式： HBuilderX

示例代码：

正确写法1

<uni-icons fontFamily="CustomFont" :size="26">&#xe8bd;</uni-icons>

正确写法2

<view class="icon-content">  
    <view v-for="(item,index) in customIcons" :key="index">  
        <uni-icons fontFamily="CustomFont" v-html="item.unicode"></uni-icons>  
        <text>{{item.name}}</text>  
    </view>  
</view>  

const sentenceList = ref([  
  {  
    name: "随手记",  
    unicode: "&#xe8ad;",  
  },  
  {  
    name: "审核",  
    unicode: "&#xe602;",  
    count: 9,  
  },  
  {  
    name: "收藏",  
    unicode: "&#xe8bc;",  
    count: 99,  
  }])

操作步骤：

使用自定义图标文件，比如iconfont

在页面渲染

预期结果：

图标正常渲染

实际结果：

图标无法解析

bug描述：

uni-icons文档通过 fontFamily 自定义图标, 代码现在是这种形式，这种形式只会渲染出字符串，

<uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons>

要这么写

<uni-icons fontFamily="CustomFont" :size="26">&#xe8bd;</uni-icons>

下面v-for的写法，也是不对的，要用v-html, 不要写{{ item.unicode }}

<view class="icon-content">  
    <view v-for="(item,index) in customIcons" :key="index">  
        <uni-icons fontFamily="CustomFont" >{{item.unicode}}</uni-icons>  
        <text>{{item.name}}</text>  
    </view>  
</view>

正确写法

<view class="icon-content">  
    <view v-for="(item,index) in customIcons" :key="index">  
        <uni-icons fontFamily="CustomFont" v-html="item.unicode"></uni-icons>  
        <text>{{item.name}}</text>  
    </view>  
</view>

2024-10-15 16:32 负责人:无分享

1 个回复

a***@gmail.com (作者)

https://juejin.cn/spost/7425803259442642983, 不能用这种，要用 "\ue8ad"这种，文档没有问题

要回复问题请先登录或注册

【报Bug】uni-icon通过 fontFamily 自定义图标文档用法错误

正确写法1

正确写法2

操作步骤：

使用自定义图标文件，比如iconfont

在页面渲染

预期结果：

图标正常渲染

实际结果：

图标无法解析

bug描述：

1 个回复

公告

相关问题

【报Bug】uni-icon通过 fontFamily 自定义图标 文档用法错误

正确写法1

正确写法2

操作步骤： 使用自定义图标文件， 比如iconfont 在页面渲染

预期结果： 图标正常渲染

实际结果： 图标无法解析

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

【报Bug】uni-icon通过 fontFamily 自定义图标文档用法错误

操作步骤：

使用自定义图标文件，比如iconfont

在页面渲染

预期结果：

图标正常渲染

实际结果：

图标无法解析