Icon 图标

语义化的矢量图形。

图标列表

默认的图标集 @kousum/semi-icons-vue 包含面性、线性两套图标，默认不带颜色，可通过 css color属性更改颜色。

@kousum/semi-icons-lab-vue 为彩色图标集，需单独安装，不可改色, lab 图标集于 v2.48 后提供

代码演示

如何引入

import Icon, { IconHome } from '@kousum/semi-icons-vue';
import { IconAvatar, IconCard } from '@kousum/semi-icons-lab-vue';

基础使用

从@kousum/semi-icons-vue包中引入图标

0px x 0px

App.vue

tsconfig.json

Import Map

xxxxxxxxxx

1

11

 

1

<script setup>

2

import { ref } from 'vue'

3

​

4

const msg = ref('Hello World!')

5

</script>

6

​

7

<template>

8

  <h1>{{ msg }}</h1>

9

  <input v-model="msg" />

10

</template>

11

​

Show Error

Auto Save

旋转

从@kousum/semi-icons-vue包中引入图标，自带尺寸、旋转、spin功能

0px x 0px

App.vue

tsconfig.json

Import Map

xxxxxxxxxx

1

11

 

1

<script setup>

2

import { ref } from 'vue'

3

​

4

const msg = ref('Hello World!')

5

</script>

6

​

7

<template>

8

  <h1>{{ msg }}</h1>

9

  <input v-model="msg" />

10

</template>

11

​

Show Error

Auto Save

尺寸

可以改变font-size来更改图标大小

Icon组件封装了size属性，可以更方便地定义图标尺寸，支持 extra-small (8x8)，small (12x12)， default (16x16)， large (20x20)， extra-large (24x24)，当size指定为inherit时，图标大小继承当前上下文字体大小

0px x 0px

App.vue

tsconfig.json

Import Map

​x

11

 

1

<script setup>

2

import { ref } from 'vue'

3

​

4

const msg = ref('Hello World!')

5

</script>

6

​

7

<template>

8

  <h1>{{ msg }}</h1>

9

  <input v-model="msg" />

10

</template>

11

​

Show Error

Auto Save

颜色

图标会自动继承外部容器 CSS 的 color 属性 你还可以通过给 Icon 设置 style props 来修改图标的颜色。

0px x 0px

App.vue

tsconfig.json

Import Map

xxxxxxxxxx

1

11

 

1

<script setup>

2

import { ref } from 'vue'

3

​

4

const msg = ref('Hello World!')

5

</script>

6

​

7

<template>

8

  <h1>{{ msg }}</h1>

9

  <input v-model="msg" />

10

</template>

11

​

Show Error

Auto Save

自定义图标

可以使用自定义图标传入Icon组件 Icon组件支持size、rotate、spin等属性

0px x 0px

App.vue

tsconfig.json

Import Map

xxxxxxxxxx

1

11

 

1

<script setup>

2

import { ref } from 'vue'

3

​

4

const msg = ref('Hello World!')

5

</script>

6

​

7

<template>

8

  <h1>{{ msg }}</h1>

9

  <input v-model="msg" />

10

</template>

11

​

Show Error

Auto Save

API参考

Icon

属性	说明	类型	默认值
className	类名	string	无
onClick	单击图标的回调事件	(e: Event) => void	无
onMouseDown	鼠标按钮按下的回调事件 >=v1.21	(e: Event) => void	无
onMouseEnter	进入图标的回调事件	(e: Event) => void	无
onMouseLeave	离开图标的回调事件	(e: Event) => void	无
onMouseMove	移动鼠标的回调事件 >=v1.21	(e: Event) => void	无
onMouseUp	鼠标按钮抬起的回调事件 >=v1.21	(e: Event) => void	无
rotate	旋转度数	number
size	尺寸，支持inherit，extra-small，small， default， large， extra-large	string	default
spin	旋转动画	boolean
style	图标样式	CSSProperties	无
svg	图标内容	ReactNode	无

Accessibility

ARIA

• Icon 组件 role 为 img，它的 aria-label 默认为组件的文件名。例如 IconHome 的 aria-label 为 home，如果你有更好的语义化名字，可以通过 aria-label 传入。

0px x 0px

App.vue

tsconfig.json

Import Map

xxxxxxxxxx

1

11

 

1

<script setup>

2

import { ref } from 'vue'

3

​

4

const msg = ref('Hello World!')

5

</script>

6

​

7

<template>

8

  <h1>{{ msg }}</h1>

9

  <input v-model="msg" />

10

</template>

11

​

Show Error

Auto Save

• Icon 内部的 svg 元素为装饰元素，默认设置了 aria-hidden 以不被屏幕阅读器阅读