Seven-Bit-UI图标 Icon #
这里内置了大量图标提供用户使用。
基本用法 #
通过 name 配置图标的名称即可使用
通用图标 #
exclaimination
close
sync
undo
redo
reload
poweroff
location
edit-square
save
detail
minus-square
plus-square
check-square
linechart
filesearch
delete
linechart
bell
home
mail
heart
star
attachment
right
left
up
down
arrowright
arrowup
arrowleft
arrowdown
check
<template>
<div class="box">
<div class="show-icon">
<sb-icon name="exclaimination" class="icon-style"></sb-icon>
<div>exclaimination</div>
</div>
<div class="show-icon">
<sb-icon name="close" class="icon-style"></sb-icon>
<div>close</div>
</div>
<div class="show-icon">
<sb-icon name="sync" class="icon-style"></sb-icon>
<div>sync</div>
</div>
<div class="show-icon">
<sb-icon name="undo" class="icon-style"></sb-icon>
<div>undo</div>
</div>
<div class="show-icon">
<sb-icon name="redo" class="icon-style"></sb-icon>
<div>redo</div>
</div>
<div class="show-icon">
<sb-icon name="reload" class="icon-style"></sb-icon>
<div>reload</div>
</div>
<div class="show-icon">
<sb-icon name="poweroff" class="icon-style"></sb-icon>
<div>poweroff</div>
</div>
<div class="show-icon">
<sb-icon name="location" class="icon-style"></sb-icon>
<div>location</div>
</div>
<div class="show-icon">
<sb-icon name="edit-square" class="icon-style"></sb-icon>
<div>edit-square</div>
</div>
<div class="show-icon">
<sb-icon name="save" class="icon-style"></sb-icon>
<div>save</div>
</div>
<div class="show-icon">
<sb-icon name="detail" class="icon-style"></sb-icon>
<div>detail</div>
</div>
<div class="show-icon">
<sb-icon name="minus-square" class="icon-style"></sb-icon>
<div>minus-square</div>
</div>
<div class="show-icon">
<sb-icon name="plus-square" class="icon-style"></sb-icon>
<div>plus-square</div>
</div>
<div class="show-icon">
<sb-icon name="check-square" class="icon-style"></sb-icon>
<div>check-square</div>
</div>
<div class="show-icon">
<sb-icon name="linechart" class="icon-style"></sb-icon>
<div>linechart</div>
</div>
<div class="show-icon">
<sb-icon name="filesearch" class="icon-style"></sb-icon>
<div>filesearch</div>
</div>
<div class="show-icon">
<sb-icon name="delete" class="icon-style"></sb-icon>
<div>delete</div>
</div>
<div class="show-icon">
<sb-icon name="linechart" class="icon-style"></sb-icon>
<div>linechart</div>
</div>
<div class="show-icon">
<sb-icon name="bell" class="icon-style"></sb-icon>
<div>bell</div>
</div>
<div class="show-icon">
<sb-icon name="home" class="icon-style"></sb-icon>
<div>home</div>
</div>
<div class="show-icon">
<sb-icon name="mail" class="icon-style"></sb-icon>
<div>mail</div>
</div>
<div class="show-icon">
<sb-icon name="heart" class="icon-style"></sb-icon>
<div>heart</div>
</div>
<div class="show-icon">
<sb-icon name="star" class="icon-style"></sb-icon>
<div>star</div>
</div>
<div class="show-icon">
<sb-icon name="attachment" class="icon-style"></sb-icon>
<div>attachment</div>
</div>
<div class="show-icon">
<sb-icon name="right" class="icon-style"></sb-icon>
<div>right</div>
</div>
<div class="show-icon">
<sb-icon name="left" class="icon-style"></sb-icon>
<div>left</div>
</div>
<div class="show-icon">
<sb-icon name="up" class="icon-style"></sb-icon>
<div>up</div>
</div>
<div class="show-icon">
<sb-icon name="down" class="icon-style"></sb-icon>
<div>down</div>
</div>
<div class="show-icon">
<sb-icon name="arrowright" class="icon-style"></sb-icon>
<div>arrowright</div>
</div>
<div class="show-icon">
<sb-icon name="arrowup" class="icon-style"></sb-icon>
<div>arrowup</div>
</div>
<div class="show-icon">
<sb-icon name="arrowleft" class="icon-style"></sb-icon>
<div>arrowleft</div>
</div>
<div class="show-icon">
<sb-icon name="arrowdown" class="icon-style"></sb-icon>
<div>arrowdown</div>
</div>
<div class="show-icon">
<sb-icon name="check" class="icon-style"></sb-icon>
<div>check</div>
</div>
</div>
</template>
<style scoped>
.box {
display: flex;
flex-flow: row;
flex-wrap: wrap;
}
.icon-style {
font-size: 24px;
margin-bottom: 20px;
color: #1d2e29;
display: flex;
}
.show-icon {
padding: 20px 0px;
border: 1px solid #ccc;
width: 25%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
transition: all 0.3s linear;
font-size: 14px;
}
.show-icon:hover {
background-color: #f2f3f5;
transition: all 0.3s linear;
font-weight: 800;
}
</style>
圆形图标 #
check-circle
close-circle
info-circle
left-circle
down-circle
copyright
minus-circle
plus-circle
play-circle
question-circle
right-circle
timeout
YUAN
up-circle
warning-circle
<template>
<div class="box">
<div class="show-icon">
<sb-icon name="check-circle" class="icon-style"></sb-icon>
<div>check-circle</div>
</div>
<div class="show-icon">
<sb-icon name="close-circle" class="icon-style"></sb-icon>
<div>close-circle</div>
</div>
<div class="show-icon">
<sb-icon name="info-circle" class="icon-style"></sb-icon>
<div>info-circle</div>
</div>
<div class="show-icon">
<sb-icon name="left-circle" class="icon-style"></sb-icon>
<div>left-circle</div>
</div>
<div class="show-icon">
<sb-icon name="down-circle" class="icon-style"></sb-icon>
<div>down-circle</div>
</div>
<div class="show-icon">
<sb-icon name="copyright" class="icon-style"></sb-icon>
<div>copyright</div>
</div>
<div class="show-icon">
<sb-icon name="minus-circle" class="icon-style"></sb-icon>
<div>minus-circle</div>
</div>
<div class="show-icon">
<sb-icon name="plus-circle" class="icon-style"></sb-icon>
<div>plus-circle</div>
</div>
<div class="show-icon">
<sb-icon name="play-circle" class="icon-style"></sb-icon>
<div>play-circle</div>
</div>
<div class="show-icon">
<sb-icon name="question-circle" class="icon-style"></sb-icon>
<div>question-circle</div>
</div>
<div class="show-icon">
<sb-icon name="right-circle" class="icon-style"></sb-icon>
<div>right-circle</div>
</div>
<div class="show-icon">
<sb-icon name="timeout" class="icon-style"></sb-icon>
<div>timeout</div>
</div>
<div class="show-icon">
<sb-icon name="YUAN" class="icon-style"></sb-icon>
<div>YUAN</div>
</div>
<div class="show-icon">
<sb-icon name="up-circle" class="icon-style"></sb-icon>
<div>up-circle</div>
</div>
<div class="show-icon">
<sb-icon name="warning-circle" class="icon-style"></sb-icon>
<div>warning-circle</div>
</div>
</div>
</template>
<style scoped>
.box {
display: flex;
flex-flow: row;
flex-wrap: wrap;
}
.icon-style {
font-size: 24px;
margin-bottom: 20px;
color: #1d2e29;
display: flex;
}
.show-icon {
padding: 20px 0px;
border: 1px solid #ccc;
width: 25%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
transition: all 0.3s linear;
font-size: 14px;
}
.show-icon:hover {
background-color: #f2f3f5;
transition: all 0.3s linear;
font-weight: 800;
}
</style>
实心图标 #
check-circle-fill
left-circle-fill
down-circle-fill
minus-circle-fill
close-circle-fill
info-circle-fill
up-circle-fill
right-circle-fill
plus-circle-fill
question-circle-fill
poweroff-circle-fill
play-circle-fill
warning-circle-fill
heart-fill
check-square-fill
minus-square-fill
close-square-fill
left-square-fill
up-square-fill
right-square-fill
delete-fill
bulb-fill
bell-fill
eye-fill
like-fill
<template>
<div class="box">
<div class="show-icon">
<sb-icon name="check-circle-fill" class="icon-style"></sb-icon>
<div>check-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="left-circle-fill" class="icon-style"></sb-icon>
<div>left-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="down-circle-fill" class="icon-style"></sb-icon>
<div>down-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="minus-circle-fill" class="icon-style"></sb-icon>
<div>minus-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="close-circle-fill" class="icon-style"></sb-icon>
<div>close-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="info-circle-fill" class="icon-style"></sb-icon>
<div>info-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="up-circle-fill" class="icon-style"></sb-icon>
<div>up-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="right-circle-fill" class="icon-style"></sb-icon>
<div>right-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="plus-circle-fill" class="icon-style"></sb-icon>
<div>plus-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="question-circle-fill" class="icon-style"></sb-icon>
<div>question-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="poweroff-circle-fill" class="icon-style"></sb-icon>
<div>poweroff-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="play-circle-fill" class="icon-style"></sb-icon>
<div>play-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="warning-circle-fill" class="icon-style"></sb-icon>
<div>warning-circle-fill</div>
</div>
<div class="show-icon">
<sb-icon name="heart-fill" class="icon-style"></sb-icon>
<div>heart-fill</div>
</div>
<div class="show-icon">
<sb-icon name="check-square-fill" class="icon-style"></sb-icon>
<div>check-square-fill</div>
</div>
<div class="show-icon">
<sb-icon name="minus-square-fill" class="icon-style"></sb-icon>
<div>minus-square-fill</div>
</div>
<div class="show-icon">
<sb-icon name="close-square-fill" class="icon-style"></sb-icon>
<div>close-square-fill</div>
</div>
<div class="show-icon">
<sb-icon name="left-square-fill" class="icon-style"></sb-icon>
<div>left-square-fill</div>
</div>
<div class="show-icon">
<sb-icon name="up-square-fill" class="icon-style"></sb-icon>
<div>up-square-fill</div>
</div>
<div class="show-icon">
<sb-icon name="right-square-fill" class="icon-style"></sb-icon>
<div>right-square-fill</div>
</div>
<div class="show-icon">
<sb-icon name="delete-fill" class="icon-style"></sb-icon>
<div>delete-fill</div>
</div>
<div class="show-icon">
<sb-icon name="bulb-fill" class="icon-style"></sb-icon>
<div>bulb-fill</div>
</div>
<div class="show-icon">
<sb-icon name="bell-fill" class="icon-style"></sb-icon>
<div>bell-fill</div>
</div>
<div class="show-icon">
<sb-icon name="eye-fill" class="icon-style"></sb-icon>
<div>eye-fill</div>
</div>
<div class="show-icon">
<sb-icon name="like-fill" class="icon-style"></sb-icon>
<div>like-fill</div>
</div>
</div>
</template>
<style scoped>
.box {
display: flex;
flex-flow: row;
flex-wrap: wrap;
}
.icon-style {
font-size: 24px;
margin-bottom: 20px;
color: #1d2e29;
display: flex;
}
.show-icon {
padding: 20px 0px;
border: 1px solid #ccc;
width: 25%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
transition: all 0.3s linear;
font-size: 14px;
}
.show-icon:hover {
background-color: #f2f3f5;
transition: all 0.3s linear;
font-weight: 800;
}
</style>
图标旋转 #
通过 spin 字段可以配置图标默认自动旋转
<template>
<div class="box">
<div>
<sb-icon name="sync" spin></sb-icon>
</div>
</div>
</template>
API #
<back-top> Props #
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| name | 图标名称 | String | - |
| spin | 是否开启图标旋转 | Boolean | false |