hero admin ui 组件库

icon-list 图标列表

展示 element-plus 内置的所有图标和转换后的名称

基本使用

el-icon-add-location
el-icon-aim
el-icon-alarm-clock
el-icon-apple
el-icon-arrow-down-bold
el-icon-arrow-down
el-icon-arrow-left-bold
el-icon-arrow-left
el-icon-arrow-right-bold
el-icon-arrow-right
el-icon-arrow-up-bold
el-icon-arrow-up
el-icon-avatar
el-icon-back
el-icon-baseball
el-icon-basketball
el-icon-bell-filled
el-icon-bell
el-icon-bicycle
el-icon-bottom-left
el-icon-bottom-right
el-icon-bottom
el-icon-bowl
el-icon-box
el-icon-briefcase
el-icon-brush-filled
el-icon-brush
el-icon-burger
el-icon-calendar
el-icon-camera-filled
el-icon-camera
el-icon-caret-bottom
el-icon-caret-left
el-icon-caret-right
el-icon-caret-top
el-icon-cellphone
el-icon-chat-dot-round
el-icon-chat-dot-square
el-icon-chat-line-round
el-icon-chat-line-square
el-icon-chat-round
el-icon-chat-square
el-icon-check
el-icon-checked
el-icon-cherry
el-icon-chicken
el-icon-circle-check-filled
el-icon-circle-check
el-icon-circle-close-filled
el-icon-circle-close
el-icon-circle-plus-filled
el-icon-circle-plus
el-icon-clock
el-icon-close-bold
el-icon-close
el-icon-cloudy
el-icon-coffee-cup
el-icon-coffee
el-icon-coin
el-icon-cold-drink
el-icon-collection-tag
el-icon-collection
el-icon-comment
el-icon-compass
el-icon-connection
el-icon-coordinate
el-icon-copy-document
el-icon-cpu
el-icon-credit-card
el-icon-crop
el-icon-d-arrow-left
el-icon-d-arrow-right
el-icon-d-caret
el-icon-data-analysis
el-icon-data-board
el-icon-data-line
el-icon-delete-filled
el-icon-delete-location
el-icon-delete
el-icon-dessert
el-icon-discount
el-icon-dish-dot
el-icon-dish
el-icon-document-add
el-icon-document-checked
el-icon-document-copy
el-icon-document-delete
el-icon-document-remove
el-icon-document
el-icon-download
el-icon-drizzling
el-icon-edit-pen
el-icon-edit
el-icon-eleme-filled
el-icon-eleme
el-icon-expand
el-icon-failed
el-icon-female
el-icon-files
el-icon-film
el-icon-filter
el-icon-finished
el-icon-first-aid-kit
el-icon-flag
el-icon-fold
el-icon-folder-add
el-icon-folder-checked
el-icon-folder-delete
el-icon-folder-opened
el-icon-folder-remove
el-icon-folder
el-icon-food
el-icon-football
el-icon-fork-spoon
el-icon-fries
el-icon-full-screen
el-icon-goblet-full
el-icon-goblet-square-full
el-icon-goblet-square
el-icon-goblet
el-icon-goods-filled
el-icon-goods
el-icon-grape
el-icon-grid
el-icon-guide
el-icon-headset
el-icon-help-filled
el-icon-help
el-icon-histogram
el-icon-home-filled
el-icon-hot-water
el-icon-house
el-icon-ice-cream-round
el-icon-ice-cream-square
el-icon-ice-cream
el-icon-ice-drink
el-icon-ice-tea
el-icon-info-filled
el-icon-iphone
el-icon-key
el-icon-knife-fork
el-icon-lightning
el-icon-link
el-icon-list
el-icon-loading
el-icon-location-filled
el-icon-location-information
el-icon-location
el-icon-lock
el-icon-lollipop
el-icon-magic-stick
el-icon-magnet
el-icon-male
el-icon-management
el-icon-map-location
el-icon-medal
el-icon-menu
el-icon-message-box
el-icon-message
el-icon-mic
el-icon-microphone
el-icon-milk-tea
el-icon-minus
el-icon-money
el-icon-monitor
el-icon-moon-night
el-icon-moon
el-icon-more-filled
el-icon-more
el-icon-mostly-cloudy
el-icon-mouse
el-icon-mug
el-icon-mute-notification
el-icon-mute
el-icon-no-smoking
el-icon-notebook
el-icon-notification
el-icon-odometer
el-icon-office-building
el-icon-open
el-icon-operation
el-icon-opportunity
el-icon-orange
el-icon-paperclip
el-icon-partly-cloudy
el-icon-pear
el-icon-phone-filled
el-icon-phone
el-icon-picture-filled
el-icon-picture-rounded
el-icon-picture
el-icon-pie-chart
el-icon-place
el-icon-platform
el-icon-plus
el-icon-pointer
el-icon-position
el-icon-postcard
el-icon-pouring
el-icon-present
el-icon-price-tag
el-icon-printer
el-icon-promotion
el-icon-question-filled
el-icon-rank
el-icon-reading-lamp
el-icon-reading
el-icon-refresh-left
el-icon-refresh-right
el-icon-refresh
el-icon-refrigerator
el-icon-remove-filled
el-icon-remove
el-icon-right
el-icon-scale-to-original
el-icon-school
el-icon-scissor
el-icon-search
el-icon-select
el-icon-sell
el-icon-semi-select
el-icon-service
el-icon-set-up
el-icon-setting
el-icon-share
el-icon-ship
el-icon-shop
el-icon-shopping-bag
el-icon-shopping-cart-full
el-icon-shopping-cart
el-icon-smoking
el-icon-soccer
el-icon-sold-out
el-icon-sort-down
el-icon-sort-up
el-icon-sort
el-icon-stamp
el-icon-star-filled
el-icon-star
el-icon-stopwatch
el-icon-success-filled
el-icon-sugar
el-icon-suitcase
el-icon-sunny
el-icon-sunrise
el-icon-sunset
el-icon-switch-button
el-icon-switch
el-icon-takeaway-box
el-icon-ticket
el-icon-tickets
el-icon-timer
el-icon-toilet-paper
el-icon-tools
el-icon-top-left
el-icon-top-right
el-icon-top
el-icon-trend-charts
el-icon-trophy
el-icon-turn-off
el-icon-umbrella
el-icon-unlock
el-icon-upload-filled
el-icon-upload
el-icon-user-filled
el-icon-user
el-icon-van
el-icon-video-camera-filled
el-icon-video-camera
el-icon-video-pause
el-icon-video-play
el-icon-view
el-icon-wallet-filled
el-icon-wallet
el-icon-warning-filled
el-icon-warning
el-icon-watch
el-icon-watermelon
el-icon-wind-power
el-icon-zoom-in
el-icon-zoom-out
<template>
  <div>
    <ha-icon-list :on-item-click="onItemClick" max-height="300px"></ha-icon-list>
  </div>
</template>

<script lang="ts" setup>
const onItemClick = (name: string) => {
  console.log('点击 item：', name)
}
</script>

<style scoped lang="scss">
</style>
显示代码

可以传入 onItemClick 属性自定义item的点击事件。如果不设置该属性，点击item时会自动复制该组件。 该属性的入参为 name，代表该组件转换后的名称，如 el-icon-add-location，无返回值。

组件 API

Attributes 属性

参数说明类型可选值默认值
width列表的宽度string绝对宽度或百分比'auto'
maxHeight列表的最大高度string绝对高度或百分比'auto'
onItemClick每一项的点击事件，默认复制该icon组件(name: string) => voidnull

Methods 方法

方法名说明参数返回值

Events 事件

事件名说明参数返回值

Slots 插槽

插槽名说明参数