图标 icon

# 图标 icon

# 描述

用于各类业务逻辑场景的基础组件。

# 图标列表

qrcode-fill

barcode-fill

secure-pay-fill

tag-fill

ticket-fill

bookkeeping-fill

bill-fill

shopping-cart-fill

qrcode

barcode

secure-pay

tag

ticket

bookkeeping

bill

shopping-cart

sim-1-fill

sim-2-fill

sim-fill

theme-sms-fill

hang-on-fill

intercept-sms-fill

aggregate-info-fill

reply-all-fill

recent-contact-fill

delete-contact-fill

send-fill

cancel-group-fill

call-forwarding-fill

reply-fill

restore-sms-fill

restore-call-records-fill

my-contact-fill

reject-mail-fill

dial-fill

hang-up-fill

revoke-fill

inbox-fill

unread-mail-fill

mark-number-fill

switch-card-fill

add-contact-fill

message-fill

video-off-fill

video-on-fill

remove-member-fill

group-fill

group-chat-fill

contact-fill

calling-fill

louder-call-fill

call-secretary-fill

call-records-fill

mail-fill

umbrella-fill

blacklist-fill

sim-1

sim-2

sim

theme-sms

hang-on

intercept-sms

aggregate-info

reply-all

recent-contact

delete-contact

send

cancel-group

call-forwarding

restore-sms

restore-call-records

my-contact

reject-mail

dial

hang-up

revoke

inbox

unread-mail

mark-number

switch-card

add-contact

message

video-off

video-on

remove-member

group

group-chat

contact

calling

louder-call

call-secretary

call-records

mail

umbrella

blacklist

usb-fill

wifi-forget-fill

wifi-disconnect-fill

wifi-link-fill

wifi-lock-fill

wifi-fill

scan-fill

bluetooth-off-fill

bluetooth-fill

bluetooth-network-fill

flight-mode-fill

usb

wifi-forget

wifi-disconnect

wifi-link

wifi-lock

wifi

stop-casting

scan

casting

bluetooth-off

bluetooth

bluetooth-network

flight-mode

strongbox-fill

memory-card-fill

office-bag-fill

printer-fill

key-fill

keyboard-fill

mouse-fill

strongbox

memory-card

office-bag

ppt

printer

laptop

key

keyboard

mouse

dlan-fill

jovi-fill

nfc-fill

switch-phone-fill

topic-fill

homepage-fill

theme-fill

events-fill

cloud-service-fill

brightness-fill

today-fill

low-battery-fill

memo-fill

full-view-fill

shutdown-fill

split-screen-fill

category-fill

multi-select-fill

do-not-disturb-fill

card-recommend-fill

card-manage-fill

feedback-fill

other-screen-fill

background-fill

shop-fill

scenes-fill

wallpaper-fill

outlook-fill

weather-fill

secure-fill

t-shirt-fill

grid-view-fill

recording-fill

wechat-fill

fast-charge-fill

performance-mode-fill

floating-ball-fill

my-expression-fill

screenshot-fill

flashlight-off-fill

flashlight-on-fill

compass-fill

fingerprint-fill

top-list-fill

control-center-fill

recommend-fill

motor-mode-fill

radio-fill

digital-health-fill

new-memo-fill

accessible-operation-fill

calendar-fill

schedule-fill

month-view-fill

browser-fill

dark-mode-fill

game-fill

game-data-fill

ebook-fill

rect-screenshot-fill

skills-fill

brush-fill

manage-fill

gourmet-fill

translate-fill

auto-brightness-fill

unlock-fill

tap-fill

calculator-fill

recognize-things-fill

power-saving-fill

interest-fill

notification-off-fill

notification-on-fill

config-fill

restart-fill

lock-fill

long-screenshot-fill

view-picture-fill

music-fill

color-fill

home-fill

drive-mode-fill

dlan

jovi

nfc

switch-phone

topic

homepage

theme

events

cloud-service

brightness

today

low-battery

memo

full-view

shutdown

split-screen

# 使用方法

在.ux文件中引入组件

<import name="q-icon" src="qaui/src/components/icon/index"></import>

# 示例

<template>
  <div class="qaui-wrap">
    <div class="icon">
      <q-icon type="love" size="48"></q-icon>
    </div>
  </div>
</template>

1
2
3
4
5
6
7

.qaui-wrap {
  flex-direction: row;
  flex-wrap: wrap;
  .icon {
    flex-direction: column;
    justify-content: center;
    width: 120px;
    height: 120px;
    .name {
      font-size: 10px;
      text-align: center;
      margin-top: 20px;
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# API

# 组件属性

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

← 快速上手按钮 button →