鍩瑰吇涓€璧峰啓瀛楃殑涔犳儻锛佽繖鏄垜绗竴澶╁弬鍔犫€滄帢閲戞瘡鏃ユ柊璁″垝路鍥涙湀鏇存柊鎸戞垬璧涒€濓紝鐐瑰嚮鏌ョ湅娲诲姩璇︽儏銆傛湰鏂囦粙缁嶇偣璧?鍏虫敞+鏀惰棌=浜嗚В鍒板湪Vue鐢熸€佷腑锛孍lementUI鏄渶椤剁骇鐨勭粍浠跺簱銆傚綋Vue鍙戝竷鍒?.0鏃讹紝Element涔熷彂甯冧簡鐩稿簲鐨勭粍浠跺簱銆傞偅灏辨槸鍏冪礌鍔犮€傞殢鍚庣殑鐢ㄦ硶涔熷彂鐢熶簡鍙樺寲銆傛瘮濡傛湰鏂囦腑el-icon鐨勭敤娉曘€傚湪ElementPlus涓紝Icon鍥炬爣鐨勭敤娉曚笌浠ュ線鏈夋墍涓嶅悓銆傝櫧鐒跺畼鏂规枃妗ｄ篃鏈夎鏄庡浣曚娇鐢紝浣嗕笉鏄緢璇︾粏锛屽彲鑳戒細缁欐柊鎵嬮€犳垚涓€浜涢殰纰嶃€傛湰鏂囧皢鑺卞嚑鍒嗛挓鏃堕棿璁茶Вel-icon鐨勫嚑绉嶇敤娉曞拰娉ㄦ剰浜嬮」銆傛敞鎰忥細鎮ㄩ渶瑕佹敞鎰忔湰鏂囩殑鍙戝竷鏃堕棿鍜屼娇鐢ㄧ殑ElementPlus鐗堟湰銆傞殢鐫€鏃堕棿鐨勬帹绉伙紝浣跨敤鎯呭喌鍙兘浼氭湁鎵€涓嶅悓銆倂ue:^3.2.25element-plus:^2.1.7@element-plus/icons-vue:^1.1.4鍒濇浜嗚ВIcon鍦‥lementUI鐨勪娇鐢ㄥ拰ElementPlus鍦╲ue2+ElementUI鐨勪娇鐢ㄤ笂鐨勫尯鍒?iclass="el-icon-edit">鍦╲ue3+ElementPlus涓殑鐢ㄦ硶涓汉璁や负ElementUI浼氭洿鏄撶敤銆備笅涓€绡囨垜浼氳瑙ｅ浣曞熀浜嶦lementPlus閲嶆柊灏佽涓€涓瘮杈冨ソ鐢ㄧ殑Icon缁勪欢銆侲lementPlus涓璉con鐨勪娇鐢ㄩ€昏緫ElementPlus鎽掑純浜嗗瓧浣撳浘鏍囩殑浣跨敤锛岀洿鎺ヤ娇鐢ㄤ簡svg鐨勬柟寮忋€傚彲浠ヨ鎶婂浘鏍囨嬁鍑烘潵鍗曠嫭缁存姢銆傛墍浠ヤ娇鐢ㄥ墠蹇呴』鍏堜笅杞絪vg鍥炬爣搴撱€備笅杞絪vg鍥炬爣搴撳懡浠わ細npminstall@element-plus/icons-vue涔熷彲浠ヤ娇鐢╕arn鎴栬€卲npm涓嬭浇#Yarnyarnadd@element-plus/icons-vue#pnpmpnpminstall@element-plus/icons-vue浣跨敤鏈変袱绉嶆柟寮忥紝涓€绉嶆槸鐩存帴浣跨敤svg锛屽彟涓€绉嶆槸閰嶅悎el-icon鏍囩浣跨敤銆傛帴涓嬫潵璇磋杩欎袱绉嶄娇鐢ㄦ柟寮忥紙鍏ㄥ眬鍜屾湰鍦板鍏ラ兘浼氭彁鍒帮級銆傚鏋滃彧浣跨敤svg锛屽鏋滃彧闇€瑕佷娇鐢‥lementPlus鎻愪緵鐨剆vg鍥炬爣搴擄紝鍒欎笉闇€瑕佸畨瑁匛lementPlus銆備絾鏄紝杩欑鎯呭喌搴旇寰堝皯鍙戠敓銆傚畨瑁呭懡浠わ細npminstall@element-plus/icons-vueElementPlus鎻愪緵浜唖vg鍥炬爣绫诲瀷锛屽彲浠ュ湪鍥炬爣闆嗗悎涓煡鐪嬨€傞€氳繃svg缁勪欢浣跨敤鍥炬爣銆傚鏋滈渶瑕佽缃浘鏍囩殑澶у皬鍜岄鑹诧紝闇€瑕侀€氳繃css鏉ヨ缃€傚叏灞€瀵煎叆鏂瑰紡浼氬叏灞€娉ㄥ唽鎵€鏈夌殑svg缁勪欢锛屼娇鐢ㄨ捣鏉ユ瘮杈冩柟渚匡紝浣嗘槸浼氱壓鐗蹭竴鐐规€ц兘銆俶ain.jsimport{createApp}from'vue'importAppfrom'./App.vue'import*asIconsfrom'@element-plus/icons-vue'//瀵煎叆鎵€鏈夊浘鏍囧苟鍛藉悕瀹冧滑Iconsconstapp=createApp(App)//閫氳繃閬嶅巻娉ㄥ唽鎵€鏈夌殑svg缁勪欢锛屽鏋滀笉杩欐牱鍋氾紝浼氱壓鐗蹭竴鐐规€ц兘for(letiinIcons){app.component(i,Icons[i])}app.mount('#app')鎯宠鍏ㄩ儴Import锛屽彧鏄兂鍏ㄥ眬娉ㄥ唽鏌愪釜svg鍥炬爣缁勪欢锛屽彲浠ラ€氳繃浠ヤ笅鏂瑰紡鍦╩ain.js涓敞鍐岋紙鎴戜互缂栬緫鍥炬爣涓轰緥锛?*鐪佺暐閮ㄥ垎浠ｇ爜*/import{Edit}from'@element-plus/icons-vue'//寮曞叆缂栬緫鍥炬爣constapp=createApp(App)app.component(Edit.name,Edit)//鍏ㄥ眬娉ㄥ唽缂栬緫鍥炬爣app.mount('#app')use椤甸潰涓殑
閮ㄥ垎浠嬬粛閮ㄥ垎浠嬬粛鐨勬柟寮忓彧闇€瑕佸湪浣跨敤鐨勫湴鏂硅繘琛屼粙缁嶃€?template>
閰嶅悎el-icon浣跨敤ElementPlus锛屽悓鏃舵彁渚沞l-icon缁勪欢鍖呰９svg鍥炬爣缁勪欢锛屾洿鏂逛究璁剧疆鍥炬爣澶у皬鍜岄鑹层€備絾闇€瑕佸湪椤圭洰涓畨瑁匛lementPlus锛屽畨瑁呭懡浠ゅ涓嬶細#閫夋嫨鍏朵腑涓€绉嶆柟寮忓畨瑁呫€?npmnpminstallelement-plus--save#Yarnyarnaddelement-plus#pnpmpnpminstallelement-plus瀹夎濂紼lementPlus鍚庯紝鍙互鍏ㄥ眬瀵煎叆锛屼篃鍙互灞€閮ㄥ鍏ャ€傚叏灞€瀵煎叆main.jsimport{createApp}from'vue'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'import{Edit}from'@element-plus/icons-vue'//import缂栬緫鍥炬爣importAppfrom'./App.vue'constapp=createApp(App)app.component(Edit.name,Edit)//鍏ㄥ眬娉ㄥ唽缂栬緫鍥炬爣app.use(ElementPlus).mount('#app')涓湪椤甸潰涓婁娇鐢?el-icon:size="20"color="hotpink">銆傛鏃堕€氳繃鍦╡l-icon涓婅缃ぇ灏忓拰棰滆壊鏉ユ帶鍒秙vgicon鐨勫ぇ灏忓拰棰滆壊銆傞渶瑕佹敞鎰忕殑鏄痵ize灞炴€у繀椤讳紶鏁板瓧锛屼笉鑳戒紶瀛楃涓诧紒鏈湴瀵煎叆
閮ㄥ垎瀵煎叆锛屾垜浠彧闇€瑕佸鍏con瀵瑰簲鐨刢ss灏卞彲浠ヤ簡銆傚鏋滃湪main.js涓紩鍏ヤ簡element-plus/dist/index.css锛屽垯椤甸潰涓笉闇€瑕佸紩鍏lement-plus/es/components/icon/style/css銆傛帹鑽愰槄璇火煈嶃€奦ite 鎼缓 Vue2 椤圭洰锛圴ue2 + vue-router + vuex锛夈€嬸煈嶃€奦ue3 杩?0绉嶇粍浠堕€氳鏂瑰紡銆嬸煈嶃€婅繖18涓綉绔欒兘璁╀綘鐨勯〉闈㈣儗鏅偒閰疯捣鏉ャ€嬬偣璧?鍏虫敞+鏀惰棌=瀛︿範浜?/p>
