图标 Icon

• 基于 iconfont 的图标组件，包含常用的图标
• 可以扩展图标库，支持自定义图标
• 支持图片图标

插件市场地址

https://ext.dcloud.net.cn/plugin?name=pure-icon

基础使用

通过 name 属性设置图标名称即可使用。

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

内置图标

内置图标名称以双下划线 "__" 开头，如：__tongzhi。

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

图片图标

如果 name 属性的值包含 "/"，则会被当作图片路径，此时图标会被渲染成图片图标，由于是图片。

提示

• 图片路径建议使用网络路径或以 "/static" 开头的绝对路径。
• 图片宽高默认为 1em，可通过 --pure-icon-image-width 和 --pure-icon-image-height 变量设置图片宽高。
• 图片的默认 font-size 大小为 1em，即，可以通过 font-size 来调整图片的大小。

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

扩展图标

如果 name 属性的值既不符合内置图标规则也不符合图片图标规则，则会被当作扩展图标名称，此时图标会被渲染成扩展图标。

配置扩展图标

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

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

至此，扩展图标库配置完成，你就可以在 name 属性中直接使用扩展图标名称啦。

使用扩展图标

将 name 属性设置成对应的图标 class 名称即可，一般需设置两个 class。

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

Props

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

Event

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

样式变量

变量名	默认值	版本
--pure-icon-display	inline-flex	+1.0.0
--pure-icon-flex-direction	row	+1.0.1
--pure-icon-align-items	center	+1.0.1
--pure-icon-justify-content	center	+1.0.1
--pure-icon-font-size	1em	+1.0.0
--pure-icon-image-width	1em	+1.0.0
--pure-icon-image-height	1em	+1.0.0