Icon 图标 | WebComponent

# Icon 图标

常用的单选框。

# 基础用法

<template>
    <div style="display: flex; align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-icon style="font-size: 24px" name="ice-cream-square" />
        <wu-plus-icon style="font-size: 24px" name="loading" />
        <wu-plus-icon style="font-size: 24px" name="star-off" />
        <wu-plus-icon style="font-size: 24px" name="user-solid" />
        <wu-plus-icon style="font-size: 24px" name="setting" />
        <wu-plus-icon style="font-size: 24px" name="warning-outline" />
    </div>
</template>
<script>
</script>

Copy

# 图例集合

platform-eleme

eleme

delete-solid

delete

s-tools

setting

user-solid

user

phone

phone-outline

more-outline

star-on

star-off

s-goods

goods

warning

warning-outline

question

info

remove

circle-plus

success

error

zoom-in

zoom-out

remove-outline

circle-plus-outline

circle-check

circle-close

s-help

help

minus

plus

check

picture

picture-outline

picture-outline-round

upload

upload2

download

camera-solid

camera

video-camera-solid

video-camera

message-solid

bell

s-cooperation

s-order

s-platform

s-fold

s-unfold

s-operation

s-promotion

s-home

s-release

s-ticket

s-management

s-open

s-shop

s-marketing

s-flag

s-comment

s-finance

s-claim

s-custom

s-opportunity

s-data

s-check

s-grid

d-caret

caret-left

caret-right

caret-bottom

caret-top

bottom-left

bottom-right

back

right

bottom

top

top-left

top-right

arrow-left

arrow-right

arrow-down

arrow-up

d-arrow-left

d-arrow-right

video-pause

video-play

refresh

refresh-right

refresh-left

finished

sort

sort-up

sort-down

rank

view

c-scale-to-original

date

edit

edit-outline

folder

folder-opened

folder-add

folder-remove

folder-delete

folder-checked

tickets

document-remove

document-delete

document-copy

document-checked

document

document-add

printer

paperclip

takeaway-box

monitor

attract

mobile

scissors

umbrella

headset

brush

mouse

coordinate

magic-stick

reading

data-line

data-board

pie-chart

data-analysis

collection-tag

film

suitcase

suitcase-1

receiving

collection

files

notebook-1

notebook-2

toilet-paper

office-building

school

table-lamp

house

no-smoking

smoking

shopping-cart-full

shopping-cart-1

shopping-cart-2

shopping-bag-1

shopping-bag-2

sold-out

sell

present

box

bank-card

money

coin

wallet

discount

price-tag

news

guide

male

female

thumb

cpu

link

connection

open

turn-off

set-up

chat-round

chat-line-round

chat-square

chat-dot-round

chat-dot-square

chat-line-square

message

postcard

position

turn-off-microphone

microphone

close-notification

bangzhu

time

odometer

crop

aim

switch-button

full-screen

copy-document

mic

stopwatch

medal-1

medal

trophy

trophy-1

first-aid-kit

discover

place

location

location-outline

location-information

add-location

delete-location

map-location

alarm-clock

timer

watch-1

watch

lock

unlock

key

service

mobile-phone

bicycle

truck

ship

basketball

football

soccer

baseball

wind-power

light-rain

lightning

heavy-rain

sunrise

sunrise-1

sunset

sunny

cloudy

partly-cloudy

cloudy-and-sunny

moon

moon-night

dish

dish-1

food

chicken

fork-spoon

knife-fork

burger

tableware

sugar

dessert

ice-cream

hot-water

water-cup

coffee-cup

cold-drink

goblet

goblet-full

goblet-square

goblet-square-full

refrigerator

grape

watermelon

cherry

apple

pear

orange

coffee

ice-tea

ice-drink

milk-tea

potato-strips

lollipop

ice-cream-square

ice-cream-round

<template>
    <div style="display: flex; padding: 8px; flex-wrap: wrap;">
        <div style="width: 16%; height: 80px; display: flex; align-items: center; justify-content: center; flex-direction: column;" v-for="(item, index) in list">
            <wu-plus-icon style="font-size: 24px;" :name="item"></wu-plus-icon>
            <div style="font-size: 10px; text-align: center">{{item}}</div>
        </div>
    </div>
</template>
<script>
    const str = 'platform-eleme,eleme,delete-solid,delete,s-tools,setting,user-solid,user,phone,phone-outline,more,more-outline,star-on,star-off,s-goods,goods,warning,warning-outline,question,info,remove,circle-plus,success,error,zoom-in,zoom-out,remove-outline,circle-plus-outline,circle-check,circle-close,s-help,help,minus,plus,check,close,picture,picture-outline,picture-outline-round,upload,upload2,download,camera-solid,camera,video-camera-solid,video-camera,message-solid,bell,s-cooperation,s-order,s-platform,s-fold,s-unfold,s-operation,s-promotion,s-home,s-release,s-ticket,s-management,s-open,s-shop,s-marketing,s-flag,s-comment,s-finance,s-claim,s-custom,s-opportunity,s-data,s-check,s-grid,menu,share,d-caret,caret-left,caret-right,caret-bottom,caret-top,bottom-left,bottom-right,back,right,bottom,top,top-left,top-right,arrow-left,arrow-right,arrow-down,arrow-up,d-arrow-left,d-arrow-right,video-pause,video-play,refresh,refresh-right,refresh-left,finished,sort,sort-up,sort-down,rank,loading,view,c-scale-to-original,date,edit,edit-outline,folder,folder-opened,folder-add,folder-remove,folder-delete,folder-checked,tickets,document-remove,document-delete,document-copy,document-checked,document,document-add,printer,paperclip,takeaway-box,search,monitor,attract,mobile,scissors,umbrella,headset,brush,mouse,coordinate,magic-stick,reading,data-line,data-board,pie-chart,data-analysis,collection-tag,film,suitcase,suitcase-1,receiving,collection,files,notebook-1,notebook-2,toilet-paper,office-building,school,table-lamp,house,no-smoking,smoking,shopping-cart-full,shopping-cart-1,shopping-cart-2,shopping-bag-1,shopping-bag-2,sold-out,sell,present,box,bank-card,money,coin,wallet,discount,price-tag,news,guide,male,female,thumb,cpu,link,connection,open,turn-off,set-up,chat-round,chat-line-round,chat-square,chat-dot-round,chat-dot-square,chat-line-square,message,postcard,position,turn-off-microphone,microphone,close-notification,bangzhu,time,odometer,crop,aim,switch-button,full-screen,copy-document,mic,stopwatch,medal-1,medal,trophy,trophy-1,first-aid-kit,discover,place,location,location-outline,location-information,add-location,delete-location,map-location,alarm-clock,timer,watch-1,watch,lock,unlock,key,service,mobile-phone,bicycle,truck,ship,basketball,football,soccer,baseball,wind-power,light-rain,lightning,heavy-rain,sunrise,sunrise-1,sunset,sunny,cloudy,partly-cloudy,cloudy-and-sunny,moon,moon-night,dish,dish-1,food,chicken,fork-spoon,knife-fork,burger,tableware,sugar,dessert,ice-cream,hot-water,water-cup,coffee-cup,cold-drink,goblet,goblet-full,goblet-square,goblet-square-full,refrigerator,grape,watermelon,cherry,apple,pear,orange,coffee,ice-tea,ice-drink,milk-tea,potato-strips,lollipop,ice-cream-square,ice-cream-round'
    const strList = str.split(',');
    export default {
        data() {
            return {
                list: strList
            }
        },

    }
</script>

Copy

# Attributes

参数	说明	类型	可选值	默认值
name	icon名	String	--	--