Skip to content
本页目录

Icon 图标

Icon 使用

点击具体 icon 可直接复制代码。

vue
<template>
    <CloseCircleFilled />
</template>

<script setup>
import { CloseCircleFilled } from '@fesjs/fes-design/icon';
</script>

Icons 列表

AppstoreOutlined
ArrowDownOutlined
ArrowUpOutlined
BellOffOutlined
BellOutlined
CaretDownOutlined
CaretLeftOutlined
CaretOrderOutlined
CaretRightOutlined
CaretUpOutlined
CheckCircleFilled
CheckCircleOutlined
CheckOutlined
CheckSquareOutlined
ClockCircleOutlined
CloseCircleFilled
CloseCircleOutlined
CloseOutlined
CloseSquareOutlined
ClusterOutlined
CommentOutlined
DateOutlined
DeleteOutlined
DoubleDownOutlined
DoubleLeftOutlined
DoubleRightOutlined
DoubleUpOutlined
DownCircleFilled
DownOutlined
DownSquareOutlined
DownloadOutlined
DragOutlined
EditOutlined
ExclamationCircleFilled
ExclamationCircleOutlined
EyeInvisibleOutlined
EyeOutlined
FileOutlined
FilterOutlined
FolderAddOutlined
FolderOutlined
HomeOutlined
IndentOutlined
InfoCircleFilled
InfoCircleOutlined
LanguageOutlined
LeftCircleFilled
LeftCircleOutlined
LeftOutlined
LeftSquareOutlined
LinkOutlined
LoadingOutlined
ManagementOutlined
MinusCircleFilled
MinusCircleOutlined
MinusOutlined
MinusSquareOutlined
MoreCircleFilled
MoreCircleOutlined
MoreOutlined
OutdentOutlined
PasswordOutlined
PictureFailOutlined
PictureOutlined
PlusCircleFilled
PlusCircleOutlined
PlusOutlined
PlusSquareOutlined
ProductOutlined
QuestionCircleFilled
QuestionCircleOutlined
QuitOutlined
ReloadOutlined
RightCircleFilled
RightCircleOutlined
RightOutlined
RightSquareOutlined
RotateLeftOutlined
RotateRightOutlined
SearchMinusOutlined
SearchOutlined
SearchPlusOutlined
SettingOutlined
ShareOutlined
SortOutlined
StarOutlined
StopFilled
StopOutlined
SwapLeftOutlined
SwapOutlined
SwapRightOutlined
UnorderedListOutlined
UpCircleFilled
UpCircleOutlined
UpOutlined
UpSquareOutlined
UploadOutlined
UserManagementOutlined
UserOutlined
VerticalLeftOutlined
VerticalRightOutlined

代码演示

基础用法

play
<template>
    <FSpace>
        <FButton type="primary"> <SearchOutlined />查询 </FButton>
        <FDivider vertical></FDivider>
        <FButton>
            <template #icon>
                <DownloadOutlined />
            </template>
            下载
        </FButton>
    </FSpace>
</template>

<script setup>
import { SearchOutlined, DownloadOutlined } from '@fesjs/fes-design/icon';
</script>

加载状态

play
<template>
    <FSpace>
        <LoadingOutlined />
        <RotateRightOutlined :spin="true" />
    </FSpace>
</template>

<script setup>
import { LoadingOutlined, RotateRightOutlined } from '@fesjs/fes-design/icon';
</script>

自定义

play
<template>
    <FForm :labelWidth="160">
        <FFormItem label="大小:">
            <FInputNumber
                v-model="size"
                :min="12"
                :max="30"
                :step="1"
            ></FInputNumber>
            <span style="margin-left: 10px">px</span>
        </FFormItem>
        <FFormItem label="颜色:">
            <FRadioGroup v-model="color">
                <FRadio value="#5384ff">primary</FRadio>
                <FRadio value="#00cb91">success</FRadio>
                <FRadio value="#ff4d4f">danger</FRadio>
                <FRadio value="#f29360">warning</FRadio>
            </FRadioGroup>
        </FFormItem>
        <FFormItem label="旋转:">
            <FInputNumber
                v-model="rotate"
                :min="0"
                :max="360"
                :step="10"
            ></FInputNumber>
            <span style="margin-left: 10px">deg</span>
        </FFormItem>
    </FForm>

    <FDivider></FDivider>

    <FSpace>
        <EditOutlined :size="size" :rotate="rotate" :color="color" />
    </FSpace>
</template>

<script setup>
import { ref } from 'vue';
import { EditOutlined } from '@fesjs/fes-design/icon';
const size = ref(24);
const rotate = ref(45);
const color = ref('#5384ff');
</script>

Icon Props

属性说明类型默认值
spin是否不停转动booleanfalse
rotate旋转number-
tabIndextabIndex,设置后会可被选中number-
size大小number-
color颜色string-