图标

王金城大约 2 分钟

注意

由于版权问题，我们禁止使用 iconfont，统一使用 svg 图标，系统中已经内置的一部分图标，如果不满足您的使用，请与设计师联系设计新的图标进行补充。

基础用法

<!-- 在组件中使用图标，不用手动导入，因为自动导入插件会帮你导入 -->
<sp-icon name="home" />
<sp-icon name="ticket-completed-multi" />

图标旋转

中心旋转

<sp-icon name="ticket-completed-multi" rotate="180deg" />

垂直翻转

<sp-icon name="ticket-completed-multi" rotate-x="180deg" />

水平翻转

<sp-icon name="ticket-completed-multi" rotate-y="180deg" />

图标大小

继承父元素字体大小

图标大小与父元素的字体大小相关，可用继承父元素的字体大小

<div style="font-size: 40px">
  <sp-icon name="ticket-completed-multi" />
</div>

使用独立属性配置

<sp-icon name="ticket-completed-multi" size="50px" />

图标文件的命名规则

文件名使用横线连接 (kebab-case)
如果为多色图标使用 multi 结尾
如果是动态图标使用 animate 结尾
如果是面型图标使用 filled 结尾
优先使用图标形态命名，其次采取图标表示的功能命名。

图标合集

提示

您可以点击图标复制代码。

系统

application

check-all

uncheck-all

check

check-circle

clear

restored-window

maximize-window

power-off

power-off-bold

delete

edit

exclamation-mark-filled

expand

fold

filter

group

language

line-height

line-square

location

lock

minus-circle-filled

minus-circle

minus

more-filled

normal

plus-circle

plus-square

plus-tag

plus

label

promotion

reload-cache

selection

shield-check

setting

signal-interrupt-filled

zoom-in

zoom-out

zoom-reset

外设

keyboard-circle

pc-filled

video-recorder

mike

mike-disabled-filled

camera-filled

植物、服饰

flower-filled

shirt

briefcase-filled

提示、气泡

tips-filled

tips

unknown-animate

warning

warn-bubble-square-filled

箭头

angles-right

arrow-down

arrow-rotate-left-light

arrow-rotate-right-light

arrow-rotate-right

refresh

switch

undo

redo

top-filled

bottom-filled

文件

paperclip

audio-square

video-filled

download-circle

download

folder

folder-filled

folder-opened-filled

export

import

play-circle

play-circle-filled

pause-circle

pause-circle-filled

image

时间

clock-four

clock

clock-filled

clock-art-filled

hourglass

工单

ticket

ticket-filled

ticket-clock-multi

ticket-completed-multi

ticket-create-multi

ticket-create

ticket-submit-multi

ticket-transfer-log

ticket-user-multi

summary-clock

summary-create

电话

soft-phone

phone-arrow-inward-filled

phone-arrow-outward-filled

phone-arrow-loop-multi

phone-arrow-right-multi

phone-arrow-right

phone-check-multi

phone-filled

phone-user-multi

phone-wave-filled

phone-wave-multi

phone-line-filled

telephone-filled

mobile-phone-filled

聊天、沟通

chat-duration-multi

chat-transfer-multi

chat-connected-multi

chat-smile-multi

chat-star-multi

chat

chat-filled

smile

robot

email-filled

sms-filled

sms

chat-double-filled

业务

home

org

monitor

pop-screen

report

message

notification

suona-multi

workspace

workspace-filled

track-filled

curve-filled

contact-log

skill-filled

skill-simple-filled

role-filled

visitor-info

人型图标

agent-filled

agent-leader-filled

user

user-plus

employee-filled

customer-filled

customer

line-up

眼睛

eye-slash

eye-filled

eye-closed

eye

仓库、购物

property

shopping-cart

storage

supplier

shopping-bag

material

box

图表

pie-filled

pie-hollow-filled

radar-filled

bar

bar-filled

bar-y-axis-filled

line

gauge

funnel-filled

digital-panel

table-filled

天地玄黄宇宙洪荒

sunny-filled

moon-fat-filled

globe-filled

star-filled

cloudy

产品

wechat-filled

wechat-mini-program-filled

wechat-mini-program

tiktok

alipay-filled

web-rtc-filled

属性

属性名	说明	类型	默认值
name	图标名称	SpIconName	unknown-animate
rotate	图标旋转 transform: rotate(${rotate}); 比较常用的选中 180° 值应为 180deg。详见 MDN	string	-
rotateX	围绕横坐标 (水平轴) 旋转，垂直翻转的值应为 180deg。与 css 属性相同，详见 MDN	string	-
rotateY	围绕纵坐标 (垂直轴) 旋转，水平翻转的值应为 180deg。与 css 属性相同，详见 MDN	string	-
size	图标大小	string	-