零号智能

  • Python
  • 部署
  • go
  • VPS
  • 运维
  • 生活琐事
  • html
零号智能
Fantasia's blog npc0.com.
  1. 首页
  2. html
  3. 正文

vue3 element 动态图标的实现

2021年11月16日 3039点热度 1人点赞 0条评论

main.js (网上大多都能找到)

// 统一导入el-icon图标
import * as ElIconModules from '@element-plus/icons'
import { transElIconName } from './utils/bus'
// 统一注册el-icon图标
for(let iconName in ElIconModules){
app.component(transElIconName(iconName), ElIconModules[iconName])
}

bus.js
// 将el-icon的组件名称 WindPower 转化为 el-icon-wind-power 形式
export function transElIconName(iconName){
return 'el-icon'+iconName.replace(/[A-Z]/g,(match)=>'-'+match.toLowerCase())
}

vue中的引用!!!(网上很难找)


附带icons json

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

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 暂无
最后更新:2021年11月19日

vpc

这个人很懒,什么都没留下

点赞
< 上一篇

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

COPYRIGHT © 2021 npc0.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

粤ICP备19157245号-1

粤公网安备 44030702002746号