图标

依托于 iconfont 字体图标库。

• 支持字体图标和图片图标。
• 支持扩展图标。

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	指定按下去的样式类
name	String	-	图标名称
mode	String	aspectFit	图片图标的裁剪、缩放模式 参考
circle	Boolean	false	圆形图标
square	Boolean	false	方形图标
theme	String	-	图标主题
ghost	Boolean	false	是否为幽灵样式
plain	Boolean	false	是否为镂空样式
disabled	Boolean	false	是否为禁用样式
size	String	-	图标容器大小
fontSize	String	-	图标字体大小
fontWeight	String	-	图标粗细
color	String	-	图标颜色
background	String	-	图标背景
radius	String	-	图标圆角
width	String	-	图标宽度
height	String	-	图标高度
margin	String	-	图标外边距
padding	String	-	图标内边距
border	String	-	图标边框
borderWidth	String	-	图标边框宽度
borderStyle	String	-	图标边框样式
borderColor	String	-	图标边框颜色

事件

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

名称

通过 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" />

主题

通过 theme 属性设置图标主题。关于主题的使用请参考 主题。

<template>
	<!-- 内置主题 -->
	<pure-icon name="__shezhi" theme="primary" />
	<pure-icon name="__shezhi" theme="success" />
	<pure-icon name="__shezhi" theme="warning" />
	<pure-icon name="__shezhi" theme="danger" />
	<pure-icon name="__shezhi" theme="info" />

	<!-- 扩展主题 -->
	<pure-icon name="__shezhi" theme="--my-theme-1" />
</template>

<style scoped lang="scss">
/* 先定义扩展主题 css 变量 */
page {
	--my-theme-1: #ff0099;
}
</style>

圆形图标

通过 circle 属性设置图标为圆形。默认宽高为 2em，自定义大小请参考 图标大小 。

<template>
	<pure-icon name="__shezhi" circle background="#ff0000" color="#ffffff" />
</template>

方形图标

通过 square 属性设置图标为方形。默认宽高为 2em，自定义大小请参考 图标大小 。

<template>
	<pure-icon name="__shezhi" square background="#ff0000" color="#ffffff" />
</template>

幽灵样式

通过 ghost 属性设置图标为幽灵样式。

<template>
	<pure-icon name="__shezhi" ghost theme="primary" />
</template>

镂空样式

通过 plain 属性设置图标为镂空样式。

<template>
	<pure-icon name="__shezhi" plain theme="primary" />
</template>

图标大小

设置图标大小的方式有以下几种：

• size: 通过 size 属性设置图标的宽度、高度为相同的值。
• fontSize: 通过 fontSize 属性设置图标的字体大小。
• width 和 height: 通过 width 和 height 属性单独设置图标的宽度和高度。

提示

图片图标的默认宽度和高度都为 1em。

<template>
	<!-- 通过 size 属性设置图标宽高为相同值 -->
	<pure-icon name="__shezhi" size="24px" />

	<!-- 通过 fontSize 属性设置图标字体大小 -->
	<pure-icon name="__shezhi" fontSize="24px" />

	<!-- 通过 width 和 height 属性设置图标宽度和高度 -->
	<pure-icon name="/static/images/i_001.png" width="30px" height="40px" />
</template>

字体粗细

通过 fontWeight 属性设置图标字体粗细。

<template>
	<pure-icon name="__shezhi" fontWeight="700" />
</template>

自定义颜色

通过 color 属性设置图标颜色。

<template>
	<pure-icon name="__shezhi" color="red" />
</template>

自定义背景

通过 background 属性设置图标背景。

<template>
	<pure-icon name="__zhibo" background="red" color="#ffffff" width="2em" height="2em" radius="50%" />
</template>

自定义圆角

通过 radius 属性设置图标圆角。

<template>
	<pure-icon name="__zhibo" radius="50%" background="red" color="#ffffff" width="2em" height="2em" />
</template>

禁用状态

通过 disabled 属性设置图标为禁用状态。

<template>
	<pure-icon name="__shezhi" disabled theme="primary" />
</template>

自定义内边距

通过 padding 属性设置图标内边距。

<template>
	<pure-icon name="__shezhi" padding="10px" />
</template>

自定义外边距

通过 margin 属性设置图标外边距。

<template>
	<pure-icon name="__shezhi" margin="10px" />
</template>

自定义边框

• 通过 border 属性设置图标边框整体样式。
• 通过 borderWidth 属性单独设置图标边框宽度。
• 通过 borderStyle 属性单独设置边框类型。
• 通过 borderColor 属性单独设置图标边框颜色。

<template>
	<pure-icon name="__shezhi" border="1px solid #000000" />
	<pure-icon name="__shezhi" borderWidth="1px" borderStyle="dashed" borderColor="#000000" />
</template>

内置图标

点击复制图标名称。

已复制剪切板

样式变量

名称	说明
--pure-icon-font-size	图标字体大小
--pure-icon-font-weight	图标字体粗细
--pure-icon-color	图标字体颜色
--pure-icon-border-radius	图标圆角大小
--pure-icon-border	图标边框样式
--pure-icon-border-width	图标边框宽度
--pure-icon-border-style	图标边框类型
--pure-icon-border-color	图标边框颜色
--pure-icon-margin	图标外边距
--pure-icon-padding	图标内边距
--pure-icon-width	图标宽度
--pure-icon-height	图标高度
--pure-icon-background-opacity	图标背景透明度
--pure-icon-disabled-opacity	图标禁用状态时的透明度