图标

图标组件。

内置图标

• 通过 name 属性设置图标名称。
• 内置图标以双下划线 __ 开头。

<template>
	<!-- 内置图标 -->
	<pure-icon name="__shezhi"></pure-icon>
</template>

图片图标

• 通过 name 属性设置图标资源路径。
• name 属性的值中包含斜杠 / 则会被认为是图片图标。

<template>
	<!-- 图片图标 -->
	<pure-icon name="/static/images/icon.png"></pure-icon>
</template>

扩展图标

按内置图标的命名格式进行扩展

1. 创建扩展图标库。

• 将 FontClass/Symbol前缀 设置为 pure-iconfont__。
• 将 Font Family 设置为 pure-iconfont。
• 字体格式一般只选择 woff2 和 Base^4 就可以了。

2. 选择格式并复制文件内容。

• 选择 Font class 类型。
• 点击在线文件链接。

• Ctrl + A 全选内容。
• Ctrl + C 复制内容。

3. 在项目中创建 css 文件。

4. 将复制的内容粘贴到 css 文件中并保存。
5. 在 App.vue 中引入 css 文件。

<style lang="scss">
/* Pure Ui 全局样式 */
@import "@/uni_modules/pure-ui/index.scss";
/* 扩展图标库文件，需放到 Pure Ui 全局样式之后 */
@import "@/styles/iconfont.scss";
</style>

6. 使用拓展图标。同内置图标使用方式一样。

<template>
	<!-- 扩展图标 -->
	<pure-icon name="__tijiaoyanzi"></pure-icon>
</template>

不按内置图标的命名格式进行扩展

1. 创建扩展图标库。

• 自定义 FontClass/Symbol前缀。
• 自定义 Font Family。
• 字体格式一般只选择 woff2 和 Base^4 就可以了。

2. 选择格式并复制文件内容。

• 选择 Font class 类型。
• 点击在线文件链接。

• Ctrl + A 全选内容。
• Ctrl + C 复制内容。

3. 在项目中创建 css 文件。

4. 将复制的内容粘贴到 css 文件中并保存。
5. 在 App.vue 中引入 css 文件。

<style lang="scss">
/* Pure Ui 全局样式 */
@import "@/uni_modules/pure-ui/index.scss";
/* 扩展图标库文件，需放到 Pure Ui 全局样式之后 */
@import "@/styles/custom-iconfont.scss";
</style>

6. 使用拓展图标。需设置完整的类名。

<template>
	<!-- 扩展图标 -->
	<pure-icon name="proj-iconfont proj-iconfont-yeqing"></pure-icon>
</template>

图标主题

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

<template>
	<pure-icon name="__loading" theme="primary"></pure-icon>
	<pure-icon name="__loading" theme="success"></pure-icon>
	<pure-icon name="__loading" theme="warning"></pure-icon>
	<pure-icon name="__loading" theme="danger"></pure-icon>
	<pure-icon name="__loading" theme="info"></pure-icon>
</template>

禁用状态

通过 disabled 属性设置图标是否禁用。

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

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
name	String		图标名称或路径
theme	String		图标主题
disabled	Boolean	false	是否禁用
mode	String	aspectFit	图片图标的裁剪模式 参考

事件

名称	参数	说明
onClick		点击事件

样式变量

名称	说明
--pure-image-width	图片宽度
--pure-image-height	图片高度
--pure-icon-disabled-opacity	禁用时的透明度

内置图标列表

因每个项目类型不同，用到的图标也会有所不同，因此 Pure Ui 内置图标只定义了 Pure Ui 组件用到的图标，建议根据项目实际情况自行扩展图标进行使用。

已复制剪切板