介绍

基于字体的图标集。

引入

import Icon from 'sard-uniapp/components/icon/icon.vue'

代码演示

基础使用

使用name属性指定要显示的图标。

<template>
  <sar-icon name="image" />
</template>

尺寸

使用size属性设置图标大小。

<template>
  <sar-icon name="image" size="64rpx" />
</template>

颜色

使用color属性设置图标颜色。

<template>
  <sar-icon name="image" color="orange" />
</template>

图片类型图标

名称里面带有/字符会被当作图片处理。

<template>
  <sar-icon name="/static/logo.svg" size="64rpx" />
</template>

自定义图标

组件库内置有用于内部组件的必须的少量的图标，在实际的应用中，通常需要引入自定义的特定风格的图标库或第三方图标库。

下面演示如何引入 iconfont 中的图标库（以此文档案例使用的demo-icons图标库来演示）：

1. 进入到 iconfont 中的 demo-icons 项目并进行以下配置配置：

   • FontClass/Symbol 前缀: demo-icons-
   • Font Family: demo-icons
   • 字体格式: 只勾选 TTF 和 Base64
   • 保存

2. 点击更新代码

3. 打开生成的在线 CSS 文件

4. 将里面的内容复制下来，粘贴到本地的 css 文件（取名 demo-icons.css）

5. 在 App.vue 文件导入 demo-icons.css 文件:

<style lang="scss">
  @import './demo-icons.css';
</style>

6. 使用demo-icons图标库中的图标：

<template>
  <sar-icon family="demo-icons" name="cart" size="48rpx" />
</template>

冒号分隔 ^1.18+

除了通过 family 指定图标字体，还可以将图标字体和图标名称通过冒号分隔符组合在一起，统一通过 name 进行设置。

<template>
  <sar-icon name="demo-icons:chat-dots" size="48rpx" />
</template>

分离图标字体和名称 ^1.19.3+

默认情况下，图标组件会将 family，以及通过 - 拼接的family 和 name 作为类名添加到图标组件。

例如：

<sar-icon family="demo-icons" name="cart" />

会添加 demo-icons demo-icons-cart 类名到组件。

如果字体名称和字体前缀不一致，可以使用 separate 属性来取消拼接。

假如字体为 iconfont，字体前缀为 icon-：

<sar-icon family="iconfont" name="icon-cart" separate />

会添加 iconfont icon-cart 类名到组件；而不是 iconfont iconfont-icon-cart 。

也可以 全局配置 图标的 separate。

内置图标

点击右边演示的图标可以复制图标名称。

API

IconProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
name	图标名称或图片链接，如果名称带有/，会被认为是图片图标	string	''
family	字体名称	string	'sari'
size	图标大小	string	-
color	图标颜色	string	-
separate 1.19.3+	是否分开字体和字体名称，而不进行拼接	boolean	false