图标

支持图片形式和可扩展的图标组件。

属性

名称	类型	默认值	说明
hoverClass	String	-	指定按下去的样式类
name	String	-	[详情] 图标名称
mode	String	aspectFit	[参考] 图片图标的裁剪、缩放模式
size	String	-	[详情] 图标大小
color	String	-	图标颜色
background	String	-	图标背景
bg	String	-	图标背景
radius	String	-	图标圆角
border	String	-	图标边框
borderWidth	String	-	图标边框宽度
borderStyle	String	-	图标边框样式
borderColor	String	-	图标边框颜色
width	String	-	图标宽度
height	String	-	图标高度
margin	String	-	图标外边距
padding	String	-	图标内边距
imageWidth	String	-	图片图标宽度
imageHeight	String	-	图片图标高度

名称

通过 name 设置字体图标的名称或图片图标的路径。

<template>
	<!-- 内置字体图标 -->
	<pure-icon name="__shezhi" />
	<!-- 自定义扩展图标 -->
	<pure-icon name="custom-iconfont custom-iconfont-dingwei" />
	<!-- 图片图标 -->
	<pure-icon name="/static/images/icon-help.png" />
</template>

图标类型

• 图片图标：如果值中包含斜杠 '/' ，则会被认为是图片图标。
• 字体图标：否则，则会被认为是字体图标。
  • 内置字体图标：以双下划线 '__' 开头的值。
  • 扩展字体图标：否则，则会被认为是扩展图标。

扩展图标

1. 在 iconfont 创建项目图标仓库。

字体格式

根据自己的需求选择字体格式，通常选择 WOFF2 和 Base64 就可以了。

2. 生成代码。

提示

需生成 Font class 类型的代码。

3. 引入到项目。

• 线上：复制在线 css 文件地址，然后在项目中引入。
• 本地：将图标项目文件下载到本地引入。

4. 将 name 属性的值设置为对应图标的 Font class 类名即可使用。

<!-- 提示：图标类名应包含 `FontClass/Symbol 前缀 + {图标名称}` 和 `Font Family` -->
<pure-icon name="proj-iconfont proj-iconfont-yeqing" />

大小

通过 size 属性设置图标大小。

• 字体图标：大小应用到 font-size 上。
• 图片图标：大小应用到 width 和 height，默认 width 和 height 都为 1em。

事件

名称	参数	说明
@onClick	-	点击时触发

内置图标

点击复制图标名称。

已复制剪切板