更新依赖，修改 element icon 使用方式调整，优化 svg-icon

src/assets/icons/sidebar-keep-alive.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M440.064 761.856A319.36 319.36 0 0 1 320 512a319.36 319.36 0 0 1 120.064-249.856 256 256 0 1 0 0 499.712zM512 218.624a320 320 0 1 1 0 586.752 320 320 0 1 1 0-586.752zm63.168 376.96L469.76 497.6l-43.52 46.848 150.592 139.968 277.76-277.76-45.248-45.312-234.176 234.24z"/></svg>

src/assets/icons/sidebar-menu.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M913.6 135.2H380.2c-26.7 0-44.4 17.8-44.4 44.4V224c0 26.7 17.8 44.4 44.4 44.4h533.3c26.7 0 44.4-17.8 44.4-44.4v-44.4c.1-26.6-17.7-44.4-44.3-44.4zm-755.6 0h-44.4c-22.2 0-44.4 22.2-44.4 44.4V224c0 22.2 22.2 44.4 44.4 44.4H158c22.2 0 44.4-22.2 44.4-44.4v-44.4c.1-22.2-22.1-44.4-44.4-44.4zm0 311.1h-44.4c-22.2 0-44.4 22.2-44.4 44.4v44.4c0 22.2 22.2 44.4 44.4 44.4H158c22.2 0 44.4-22.2 44.4-44.4v-44.4c.1-22.2-22.1-44.4-44.4-44.4zm755.6 0H380.2c-26.7 0-44.4 17.8-44.4 44.4v44.4c0 26.7 17.8 44.4 44.4 44.4h533.3c26.7 0 44.4-17.8 44.4-44.4v-44.4c.1-26.6-17.7-44.4-44.3-44.4zM158 757.4h-44.4c-22.2 0-44.4 22.2-44.4 44.4v44.4c0 22.2 22.2 44.4 44.4 44.4H158c22.2 0 44.4-22.2 44.4-44.4v-44.4c.1-22.2-22.1-44.4-44.4-44.4zm755.6 0H380.2c-26.7 0-44.4 17.8-44.4 44.4v44.4c0 26.7 17.8 44.4 44.4 44.4h533.3c26.7 0 44.4-17.8 44.4-44.4v-44.4c.1-26.6-17.7-44.4-44.3-44.4z"/></svg>

src/assets/icons/sidebar-videos.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M84.48 724.48h852.48V128H84.48v596.48zM0 128c0-46.08 38.4-84.48 84.48-84.48h852.48c48.64 0 87.04 38.4 87.04 84.48v596.48c0 46.08-38.4 84.48-84.48 84.48H84.48C38.4 808.96 0 770.56 0 724.48V128z"/><path d="M468.48 724.48h84.48v212.48h-84.48V724.48z"/><path d="M299.52 896h427.52v84.48H299.52V896zm89.6-588.8v230.4l245.76-122.88z"/></svg>

src/components/SvgIcon/index.vue

@@ -1,5 +1,8 @@
 <template>
-    <i v-if="name.indexOf('el-icon-') === 0 || name.indexOf('ri-') === 0" class="svg-icon" :style="transformStyle" :class="name" />
+    <el-icon v-if="name.indexOf('el-icon-') === 0" class="svg-icon" :style="transformStyle">
+        <Component :is="name" />
+    </el-icon>
+    <i v-else-if="name.indexOf('ri-') === 0" class="svg-icon" :style="transformStyle" :class="name" />
     <svg v-else class="svg-icon" :style="transformStyle" aria-hidden="true">
         <use :xlink:href="`#icon-${name}`" />
     </svg>

src/layout/components/ThemeSetting/index.vue

@@ -33,7 +33,7 @@
                 <div class="label">
                     切换跳转
                     <el-tooltip content="开启该功能后，切换侧边栏时，页面自动跳转至该侧边栏导航下第一个路由地址" placement="top" :append-to-body="false">
-                        <svg-icon name="el-icon-question" />
+                        <svg-icon name="el-icon-question-filled" />
                     </el-tooltip>
                 </div>
                 <el-switch v-model="switchSidebarAndPageJump" :disabled="['single'].includes($store.state.settings.menuMode)" />
@@ -52,7 +52,7 @@
                 <div class="label">
                     顶栏固定
                     <el-tooltip content="包含顶部导航栏和标签栏" placement="top" :append-to-body="false">
-                        <svg-icon name="el-icon-question" />
+                        <svg-icon name="el-icon-question-filled" />
                     </el-tooltip>
                 </div>
                 <el-switch v-model="topbarFixed" />
@@ -66,7 +66,7 @@
                 <div class="label">
                     导航栏搜索
                     <el-tooltip content="对导航栏进行快捷搜索" placement="top" :append-to-body="false">
-                        <svg-icon name="el-icon-question" />
+                        <svg-icon name="el-icon-question-filled" />
                     </el-tooltip>
                 </div>
                 <el-switch v-model="enableNavSearch" />
@@ -75,7 +75,7 @@
                 <div class="label">
                     全屏
                     <el-tooltip content="该功能使用场景极少，用户习惯于通过窗口“最大化”功能来扩大显示区域，以显示更多内容，并且使用 F11 键也可以进入全屏效果" placement="top" :append-to-body="false">
-                        <svg-icon name="el-icon-question" />
+                        <svg-icon name="el-icon-question-filled" />
                     </el-tooltip>
                 </div>
                 <el-switch v-model="enableFullscreen" />
@@ -84,7 +84,7 @@
                 <div class="label">
                     页面刷新
                     <el-tooltip content="开启时会阻止原生 F5 键刷新功能，并采用框架提供的刷新模式进行页面刷新" placement="top" :append-to-body="false">
-                        <svg-icon name="el-icon-question" />
+                        <svg-icon name="el-icon-question-filled" />
                     </el-tooltip>
                 </div>
                 <el-switch v-model="enablePageReload" />
@@ -94,7 +94,7 @@
                 <div class="label">
                     组件尺寸
                     <el-tooltip content="全局设置 Element Plus 组件的默认尺寸大小" placement="top" :append-to-body="false">
-                        <svg-icon name="el-icon-question" />
+                        <svg-icon name="el-icon-question-filled" />
                     </el-tooltip>
                 </div>
                 <el-select v-model="elementSize" size="small">
@@ -112,7 +112,7 @@
                 <div class="label">
                     加载进度条
                     <el-tooltip content="该功能开启时，跳转路由会看到页面顶部有条蓝色的进度条" placement="top" :append-to-body="false">
-                        <svg-icon name="el-icon-question" />
+                        <svg-icon name="el-icon-question-filled" />
                     </el-tooltip>
                 </div>
                 <el-switch v-model="enableProgress" />
@@ -121,7 +121,7 @@
                 <div class="label">
                     动态标题
                     <el-tooltip content="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置" placement="top" :append-to-body="false">
-                        <svg-icon name="el-icon-question" />
+                        <svg-icon name="el-icon-question-filled" />
                     </el-tooltip>
                 </div>
                 <el-switch v-model="enableDynamicTitle" />
@@ -130,7 +130,7 @@
                 <div class="label">
                     欢迎页
                     <el-tooltip content="欢迎页即控制台页面，该功能开启时，登录成功默认进入控制台页面；关闭时则默认进入侧边栏导航第一个导航页面" placement="top" :append-to-body="false">
-                        <svg-icon name="el-icon-question" />
+                        <svg-icon name="el-icon-question-filled" />
                     </el-tooltip>
                 </div>
                 <el-switch v-model="enableDashboard" />

src/layout/components/UserMenu/index.vue

@@ -21,10 +21,10 @@
         <el-dropdown class="user-container" @command="userCommand">
             <div class="user-wrapper">
                 <el-avatar size="medium">
-                    <i class="el-icon-user-solid" />
+                    <el-icon><el-icon-user-filled /></el-icon>
                 </el-avatar>
                 {{ $store.state.user.account }}
-                <i class="el-icon-caret-bottom" />
+                <el-icon><el-icon-caret-bottom /></el-icon>
             </div>
             <template #dropdown>
                 <el-dropdown-menu class="user-dropdown">

src/main.js

@@ -13,7 +13,7 @@ import 'element-plus/dist/index.css'
 import * as ElementIcons from '@element-plus/icons'
 // 将 element-plus 的图标库注册到全局
 for (var key in ElementIcons) {
-    app.component(`El${ElementIcons[key].name}`, ElementIcons[key])
+    app.component(`ElIcon${ElementIcons[key].name}`, ElementIcons[key])
 }
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 app.use(ElementPlus, {

src/views/component_basic_example/button.vue

@@ -28,12 +28,12 @@
                 <el-button type="danger" round>危险按钮</el-button>
             </el-row>
             <el-row>
-                <el-button icon="el-icon-search" circle />
-                <el-button type="primary" icon="el-icon-edit" circle />
-                <el-button type="success" icon="el-icon-check" circle />
-                <el-button type="info" icon="el-icon-message" circle />
-                <el-button type="warning" icon="el-icon-star-off" circle />
-                <el-button type="danger" icon="el-icon-delete" circle />
+                <el-button :icon="Search" circle />
+                <el-button type="primary" :icon="Edit" circle />
+                <el-button type="success" :icon="Check" circle />
+                <el-button type="info" :icon="Message" circle />
+                <el-button type="warning" :icon="Star" circle />
+                <el-button type="danger" :icon="Delete" circle />
             </el-row>
         </page-main>
         <page-main title="禁用状态" class="demo">
@@ -59,51 +59,49 @@
             <el-button type="text" disabled>文字按钮</el-button>
         </page-main>
         <page-main title="图标按钮" class="demo">
-            <el-button type="primary" icon="el-icon-edit" />
-            <el-button type="primary" icon="el-icon-share" />
-            <el-button type="primary" icon="el-icon-delete" />
-            <el-button type="primary" icon="el-icon-search">搜索</el-button>
-            <el-button type="primary">上传<i class="el-icon-upload el-icon--right" /></el-button>
+            <el-button type="primary" :icon="Edit" />
+            <el-button type="primary" :icon="Share" />
+            <el-button type="primary" :icon="Delete" />
+            <el-button type="primary" :icon="Search">搜索</el-button>
+            <el-button type="primary">
+                上传
+                <el-icon class="el-icon--right"><el-icon-upload /></el-icon>
+            </el-button>
         </page-main>
         <page-main title="按钮组" class="demo">
             <el-button-group style="margin-right: 10px;">
-                <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
-                <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
+                <el-button type="primary" :icon="ArrowLeft">上一页</el-button>
+                <el-button type="primary">下一页<el-icon class="el-icon--right"><el-icon-arrow-right /></el-icon></el-button>
             </el-button-group>
             <el-button-group>
-                <el-button type="primary" icon="el-icon-edit" />
-                <el-button type="primary" icon="el-icon-share" />
-                <el-button type="primary" icon="el-icon-delete" />
+                <el-button type="primary" :icon="Edit" />
+                <el-button type="primary" :icon="Share" />
+                <el-button type="primary" :icon="Delete" />
             </el-button-group>
         </page-main>
         <page-main title="加载中" class="demo">
             <el-button type="primary" :loading="true">加载中</el-button>
         </page-main>
         <page-main title="不同尺寸" class="demo">
-            <el-row>
+            <div style="margin-bottom: 10px;">
                 <el-button>默认按钮</el-button>
                 <el-button size="medium">中等按钮</el-button>
                 <el-button size="small">小型按钮</el-button>
                 <el-button size="mini">超小按钮</el-button>
-            </el-row>
-            <el-row>
+            </div>
+            <div>
                 <el-button round>默认按钮</el-button>
                 <el-button size="medium" round>中等按钮</el-button>
                 <el-button size="small" round>小型按钮</el-button>
                 <el-button size="mini" round>超小按钮</el-button>
-            </el-row>
+            </div>
         </page-main>
     </div>
 </template>
 
-<script>
+<script setup>
 import Alert from './components/alert.vue'
-
-export default {
-    components: {
-        Alert
-    }
-}
+import { Search, Edit, Check, Message, Star, Delete, Share, ArrowLeft } from '@element-plus/icons'
 </script>
 
 <style lang="scss" scoped>

src/views/component_basic_example/icon.json

@@ -1 +0,0 @@
-["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"]

src/views/component_basic_example/icon.vue

@@ -3,40 +3,24 @@
         <Alert />
         <page-header title="图标" />
         <page-main class="demo">
-            <i class="el-icon-edit" />
-            <i class="el-icon-share" />
-            <i class="el-icon-delete" />
-            <el-button type="primary" icon="el-icon-search">搜索</el-button>
-        </page-main>
-        <page-main title="图标集合">
-            <div v-for="(item, index) in icon" :key="index" class="list-icon">
-                <el-tooltip class="item" effect="dark" :content="`el-icon-${item}`" placement="top">
-                    <i :class="`el-icon-${item}`" />
-                </el-tooltip>
-            </div>
+            <el-icon><el-icon-edit /></el-icon>
+            <el-icon><el-icon-share /></el-icon>
+            <el-icon><el-icon-delete /></el-icon>
+            <el-button type="primary" :icon="Search">
+                搜索
+            </el-button>
         </page-main>
     </div>
 </template>
 
-<script>
+<script setup>
 import Alert from './components/alert.vue'
-import icon from './icon.json'
-
-export default {
-    components: {
-        Alert
-    },
-    computed: {
-        icon() {
-            return icon
-        }
-    }
-}
+import { Search } from '@element-plus/icons'
 </script>
 
 <style lang="scss" scoped>
 .demo {
-    i {
+    > .el-icon {
         color: #606266;
         margin: 0 20px;
         font-size: 1.5em;
@@ -46,10 +30,4 @@ export default {
         margin: 0 20px;
     }
 }
-.list-icon {
-    display: inline-block;
-    font-size: 32px;
-    color: #606266;
-    margin: 10px;
-}
 </style>

src/views/component_basic_example/input.vue

@@ -15,8 +15,16 @@
             <el-input v-model="input" placeholder="请输入内容" show-password />
         </page-main>
         <page-main title="带 icon 的输入框" class="demo">
-            <el-input v-model="input1" placeholder="请选择日期" suffix-icon="el-icon-date" />
-            <el-input v-model="input2" placeholder="请输入内容" prefix-icon="el-icon-search" />
+            <el-input v-model="input1" placeholder="请选择日期">
+                <template #suffix>
+                    <el-icon><el-icon-calendar /></el-icon>
+                </template>
+            </el-input>
+            <el-input v-model="input2" placeholder="请输入内容">
+                <template #prefix>
+                    <el-icon><el-icon-search /></el-icon>
+                </template>
+            </el-input>
         </page-main>
         <page-main title="文本域" class="demo">
             <el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容" />

src/views/component_basic_example/link.vue

@@ -23,20 +23,18 @@
             <el-link>有下划线</el-link>
         </page-main>
         <page-main title="图标" class="demo">
-            <el-link icon="el-icon-edit">编辑</el-link>
-            <el-link>查看<i class="el-icon-view el-icon--right" /> </el-link>
+            <el-link :icon="Edit">编辑</el-link>
+            <el-link>
+                查看
+                <el-icon class="el-icon-view el-icon--right"><el-icon-view /></el-icon>
+            </el-link>
         </page-main>
     </div>
 </template>
 
-<script>
+<script setup>
 import Alert from './components/alert.vue'
-
-export default {
-    components: {
-        Alert
-    }
-}
+import { Edit } from '@element-plus/icons'
 </script>
 
 <style lang="scss" scoped>

src/views/index.vue

@@ -37,37 +37,37 @@
                 <el-row :gutter="20" style="margin: 0 -10px 20px;">
                     <el-col :md="4">
                         <div class="icon-box icon-box-1" @click="onIconClick('收藏')">
-                            <i class="el-icon-star-off" />
+                            <el-icon><el-icon-star /></el-icon>
                             <div class="title">收藏</div>
                         </div>
                     </el-col>
                     <el-col :md="4">
                         <div class="icon-box icon-box-2" @click="onIconClick('通知')">
-                            <i class="el-icon-bell" />
+                            <el-icon><el-icon-bell /></el-icon>
                             <div class="title">通知</div>
                         </div>
                     </el-col>
                     <el-col :md="4">
                         <div class="icon-box icon-box-3" @click="onIconClick('图集')">
-                            <i class="el-icon-picture-outline" />
+                            <el-icon><el-icon-picture /></el-icon>
                             <div class="title">图集</div>
                         </div>
                     </el-col>
                     <el-col :md="4">
                         <div class="icon-box icon-box-4" @click="onIconClick('拍照')">
-                            <i class="el-icon-camera" />
+                            <el-icon><el-icon-camera /></el-icon>
                             <div class="title">拍照</div>
                         </div>
                     </el-col>
                     <el-col :md="4">
                         <div class="icon-box icon-box-5" @click="onIconClick('视频')">
-                            <i class="el-icon-video-camera" />
+                            <el-icon><el-icon-video-camera /></el-icon>
                             <div class="title">视频</div>
                         </div>
                     </el-col>
                     <el-col :md="4">
                         <div class="icon-box icon-box-6" @click="onIconClick('购物')">
-                            <i class="el-icon-goods" />
+                            <el-icon><el-icon-goods /></el-icon>
                             <div class="title">购物</div>
                         </div>
                     </el-col>