图标 Icon

图标组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 name 属性设置图标名称。

<template>
    <pure-icon name="name"></pure-icon>
</template>

内置图标

• 以双下划线 __ 开始的图标名称为内置图标。

<template>
    <pure-icon name="__tongzhi"></pure-icon>
</template>

图片图标

• 如果 name 中包含 "/"，则会被当作图片路径，此时图标会被渲染成图片图标。
• 图片路径建议使用网络路径或以 "/static" 开头的绝对路径。

提示

• 图片路径建议使用网络路径或以 "/static" 开头的绝对路径。

提示

• 图片的宽高默认为 1em，所以可以通过 --pure-icon-font-size 来调整大小。
• 也可通过 --pure-icon-image-width 和 --pure-icon-image-height 来调整大小。

<template>
    <pure-icon name="/static/images/icon.png"></pure-icon>
</template>

扩展图标

• 如果 name 既不符合内置图标规则，也不符合图片图标规则，则会被当作扩展图标名称。

1. 配置扩展图标
   • 首先在 iconfont 中定义好图标库，图标库的字体格式需选择 woff2 和 Base64，一般情况只选择这两种方式即可。
   • 将项目下载至本地。
   • 在 App.vue 的 style 标签中引入下载的扩展图标库 css 文件。

/* App.vue */
/* 引入下载的扩展图标库样式文件 */
@import "@/iconfonts/iconfont.css";

2. 使用扩展图标
   • 至此，扩展图标库配置完成，将 name 直接设置为对应的图标 class 即可。

<template>
    <pure-icon name="custom-iconfont custom-iconfont-arrow"></pure-icon>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	同 view 的 hover-class	String	""	-	+1.0.0
name	字体图标的名称丨图片图标的路径丨扩展图标的类名	String	""	-	+1.0.0
mode	图片图标的裁剪模式	String	aspectFit	同 <image> 组件的 mode，参考	+1.0.0
disabled	禁用状态	Boolean	false	true	+1.0.0
disabledClass	禁用类名	String	pure-disabled	-	+1.0.0

Event

事件名	说明	回调参数	版本
onClick	点击事件	-	+1.0.0