Icon 图标
Vangle 提供了一套常用的图标集合。
javascript
import { createApp } from 'vue';
import { VanIcon } from 'vangle';
const app = createApp();
app.use(VanIcon);
import { createApp } from 'vue';
import { VanIcon } from 'vangle';
const app = createApp();
app.use(VanIcon);
基本使用
图标颜色
图标大小
图标集合
- add-location
- aim
- alarm-clock
- apple
- arrow-down-bold
- arrow-down
- arrow-left-bold
- arrow-left
- arrow-right-bold
- arrow-right
- arrow-up-bold
- arrow-up
- avatar
- back
- baseball
- basketball
- bell-filled
- bell
- bicycle
- bottom-left
- bottom-right
- bottom
- bowl
- box
- briefcase
- brush-filled
- brush
- burger
- calendar
- camera-filled
- camera
- caret-bottom
- caret-left
- caret-right
- caret-top
- cellphone
- chat-dot-round
- chat-dot-square
- chat-line-round
- chat-line-square
- chat-round
- chat-square
- check
- checked
- cherry
- chicken
- chrome-filled
- circle-check-filled
- circle-check
- circle-close-filled
- circle-close
- circle-plus-filled
- circle-plus
- clock
- close-bold
- close
- cloudy
- coffee-cup
- coffee
- coin
- cold-drink
- collection-tag
- collection
- comment
- compass
- connection
- coordinate
- copy-document
- cpu
- credit-card
- crop
- d-arrow-left
- d-arrow-right
- d-caret
- data-analysis
- data-board
- data-line
- delete-filled
- delete-location
- delete
- dessert
- discount
- dish-dot
- dish
- document-add
- document-checked
- document-copy
- document-delete
- document-remove
- document
- download
- drizzling
- edit-pen
- edit
- eleme-filled
- eleme
- element-plus
- expand
- failed
- female
- files
- film
- filter
- finished
- first-aid-kit
- flag
- fold
- folder-add
- folder-checked
- folder-delete
- folder-opened
- folder-remove
- folder
- food
- football
- fork-spoon
- fries
- full-screen
- goblet-full
- goblet-square-full
- goblet-square
- goblet
- gold-medal
- goods-filled
- goods
- grape
- grid
- guide
- handbag
- headset
- help-filled
- help
- hide
- histogram
- home-filled
- hot-water
- house
- ice-cream-round
- ice-cream-square
- ice-cream
- ice-drink
- ice-tea
- info-filled
- iphone
- key
- knife-fork
- lightning
- link
- list
- loading
- location-filled
- location-information
- location
- lock
- lollipop
- magic-stick
- magnet
- male
- management
- map-location
- medal
- memo
- menu
- message-box
- message
- mic
- microphone
- milk-tea
- minus
- money
- monitor
- moon-night
- moon
- more-filled
- more
- mostly-cloudy
- mouse
- mug
- mute-notification
- mute
- no-smoking
- notebook
- notification
- odometer
- office-building
- open
- operation
- opportunity
- orange
- paperclip
- partly-cloudy
- pear
- phone-filled
- phone
- picture-filled
- picture-rounded
- picture
- pie-chart
- place
- platform
- plus
- pointer
- position
- postcard
- pouring
- present
- price-tag
- printer
- promotion
- quartz-watch
- question-filled
- rank
- reading-lamp
- reading
- refresh-left
- refresh-right
- refresh
- refrigerator
- remove-filled
- remove
- right
- scale-to-original
- school
- scissor
- search
- select
- sell
- semi-select
- service
- set-up
- setting
- share
- ship
- shop
- shopping-bag
- shopping-cart-full
- shopping-cart
- shopping-trolley
- smoking
- soccer
- sold-out
- sort-down
- sort-up
- sort
- stamp
- star-filled
- star
- stopwatch
- success-filled
- sugar
- suitcase-line
- suitcase
- sunny
- sunrise
- sunset
- switch-button
- switch-filled
- switch
- takeaway-box
- ticket
- tickets
- timer
- toilet-paper
- tools
- top-left
- top-right
- top
- trend-charts
- trophy-base
- trophy
- turn-off
- umbrella
- unlock
- upload-filled
- upload
- user-filled
- user
- van
- video-camera-filled
- video-camera
- video-pause
- video-play
- view
- wallet-filled
- wallet
- warn-triangle-filled
- warning-filled
- warning
- watch
- watermelon
- wind-power
- zoom-in
- zoom-out
Attributes
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 图标名称 | ^[string] | - |
color | svg 的 fill 颜色 | ^[string] | 继承颜色 |
size | SVG 图标的大小,size x size | ^[number] / ^[string] | 继承字体大小 |
Slots
名称 | 说明 |
---|---|
default | 自定义默认内容 |