图标 icon

描述

提供了丰富的常用icon，可以直接在自己项目中通过简单的配置来使用。

图标库

点击图标可复制图标type属性到剪贴板，图标下为html实体值，可用于rating组件的icon值。

add-circle-o

&#xe977

add-circle

&#xe976

add

&#xe975

airplane

&#xe974

alarm

&#xe973

arrow-back

&#xe972

arrow-down

&#xe971

arrow-dropdown-circle

&#xe970

arrow-dropdown

&#xe96f

arrow-dropleft-circle

&#xe96e

arrow-dropleft

&#xe96d

arrow-dropright-circle

&#xe96c

arrow-dropright

&#xe96b

arrow-dropup-circle

&#xe96a

arrow-dropup

&#xe969

arrow-fwd

&#xe968

arrow-round-back

&#xe967

arrow-round-down

&#xe966

arrow-r-fwd

&#xe965

arrow-round-up

&#xe964

arrow-up

&#xe963

bluetooth

&#xe962

bug

&#xe961

build

&#xe960

business

&#xe95f

call

&#xe95e

camera

&#xe95d

card

&#xe95c

cart

&#xe95b

chatbox

&#xe95a

chat

&#xe959

checkbox-outline

&#xe958

checkbox

&#xe957

checkmark-circle-outline

&#xe956

checkmark-circle

&#xe955

checkmark

&#xe954

close-circle-outline

&#xe953

close-circle

&#xe952

close

&#xe951

cloud-done

&#xe950

cloud-down

&#xe94f

cloud-up

&#xe94e

cut

&#xe94d

eye-off

&#xe94c

eye

&#xe94b

finger-print

&#xe94a

flash-off

&#xe949

flash

&#xe948

flashlight

&#xe947

funnel

&#xe946

gift

&#xe945

heart-dislike

&#xe944

heart-empty

&#xe943

heart-half

&#xe942

heart

&#xe941

help-circle-outline

&#xe940

help-circle

&#xe93f

image

&#xe93e

images

&#xe93d

infinite

&#xe93c

information-circle-outline

&#xe93b

information-circle

&#xe93a

key

&#xe939

link

&#xe938

list

&#xe937

mail

&#xe936

menu

&#xe935

musical

&#xe934

notification-off

&#xe933

notification-o

&#xe932

notification

&#xe931

options

&#xe930

paper-plane

&#xe92f

pause

&#xe92e

people

&#xe92d

person-add

&#xe92c

person

&#xe92b

pie

&#xe92a

pin

&#xe929

play-circle

&#xe928

play

&#xe927

power

&#xe926

pricetag

&#xe925

pricetags

&#xe924

print

&#xe923

qr-scanner

&#xe922

refresh-circle

&#xe921

refresh

&#xe920

remove-circle-outline

&#xe91f

remove-circle

&#xe91e

rewind

&#xe91d

rocket

&#xe91c

save

&#xe91b

search

&#xe91a

settings

&#xe919

share-alt

&#xe918

skip-bwd

&#xe917

skip-fwd

&#xe916

snow

&#xe915

star-half

&#xe914

star-outline

&#xe913

star

&#xe912

stats

&#xe911

sync

&#xe910

thumbs-down

&#xe90f

thumbs-up

&#xe90e

time

&#xe90d

timer

&#xe90c

trash

&#xe90b

trend-down

&#xe90a

trend-up

&#xe909

undo

&#xe908

unlock

&#xe907

vol-high

&#xe906

vol-low

&#xe905

vol-mute

&#xe904

vol-off

&#xe903

warning

&#xe902

wifi

&#xe901

woman

&#xe900

使用方法

在.ux文件中引入组件

<import name="my-icon" src="apex-ui/components/icon/index"></import>

示例

<template>
    <my-icon type="info" size="48"></my-icon>
</template>

API

组件属性

属性	类型	默认值	说明
type	String	'empty'	图标的类型
size	Number	14	图标的大小
color	String	-	图标的颜色