修改svg图标属性名

src/assets/styles/variables.module.scss

@@ -8,6 +8,13 @@ $tiffany: #4AB7BD;
 $yellow: #FEC171;
 $panGreen: #30B08F;
 
+:root {
+	--base-menu-color: #bfcbd9;
+	--base-menu-color-active: #f4f4f5;
+	--base-menu-background: #304156;
+	--base-logo-title-color: #ffffff;
+	--base-topBar-background: #ffffff;
+}
 // 默认菜单主题风格
 $base-menu-color: #bfcbd9;
 $base-menu-color-active: #f4f4f5;

src/components/FileUpload/index.vue

@@ -43,7 +43,7 @@
     <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
       <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
         <el-link :href="`${file.url}`" :underline="false" target="_blank">
-          <svg-icon class-name="doc-icon" icon-class="documentation" />
+          <svg-icon class-name="doc-icon" name="documentation" />
           {{ file.name }}
         </el-link>
         <div class="ele-upload-list__item-content-action">
@@ -89,8 +89,6 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  // form 列名
-  column: [String],
   // 上传携带的参数
   data: {
     type: Object,

src/components/HeaderSearch/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="{ 'show': show }" class="header-search">
-    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
+    <svg-icon class-name="search-icon" name="search" @click.stop="click" />
     <el-select
       ref="headerSearchSelectRef"
       v-model="search"

src/components/IconSelect/index.vue

@@ -16,7 +16,7 @@
       <el-tab-pane label="svg-icon" name="1">
         <div class="icon-list">
           <div class="icon-item mb10" v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
-            <svg-icon :icon-class="item" style="height: 30px; width: 16px" />
+            <svg-icon :name="item" style="height: 30px; width: 16px" />
             <div class="name">{{ item }}</div>
           </div>
         </div>
@@ -24,7 +24,7 @@
       <el-tab-pane label="Element-UI Icons" name="2">
         <div class="icon-list">
           <div class="icon-item mb10" v-for="item of elementIcons" :key="item" @click="selectedIcon(item, 'ele-')">
-            <svg-icon :icon-class="'ele-' + item" style="height: 30px; width: 16px" />
+            <svg-icon :name="'ele-' + item" style="height: 30px; width: 16px" />
             <div class="name">{{ item }}</div>
           </div>
         </div>

src/components/Screenfull/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle" />
+    <svg-icon :name="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle" />
   </div>
 </template>
 

src/components/SizeSelect/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-dropdown trigger="hover" @command="handleSetSize" style="vertical-align: middle">
-      <svg-icon class-name="size-icon" icon-class="size" />
+      <svg-icon class-name="size-icon" name="size" />
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value">

src/components/SvgIcon/index.vue

@@ -8,9 +8,10 @@
 <script>
 export default defineComponent({
   props: {
-    iconClass: {
+    name: {
       type: String,
       required: true,
+      default: '',
     },
     className: {
       type: String,
@@ -24,17 +25,17 @@ export default defineComponent({
   setup(props) {
     return {
       iconType: computed(() => {
-        if (props.iconClass.startsWith('ele')) {
+        if (props.name.startsWith('ele')) {
           return 1
         } else {
           return 0
         }
       }),
       iconName: computed(() => {
-        if (props.iconClass?.startsWith('ele-')) {
+        if (props.name?.startsWith('ele-')) {
-          return props.iconClass.replace('ele-', '')
+          return props.name.replace('ele-', '')
         } else {
-          return `#icon-${props.iconClass}`
+          return `#icon-${props.name}`
         }
       }),
       svgClass: computed(() => {

src/components/TopNav/index.vue

@@ -2,7 +2,7 @@
   <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false">
     <template v-for="(item, index) in topMenus">
       <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber">
-        <svg-icon :icon-class="item.meta.icon" />
+        <svg-icon :name="item.meta.icon" />
         &nbsp;{{ item.meta.title }}
       </el-menu-item>
     </template>
@@ -12,7 +12,7 @@
       <template #title>更多菜单</template>
       <template v-for="(item, index) in topMenus">
         <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber">
-          <svg-icon :icon-class="item.meta.icon" />
+          <svg-icon :name="item.meta.icon" />
           {{ item.meta.title }}
         </el-menu-item>
       </template>

src/components/Zr/Doc/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <svg-icon icon-class="question" @click="goto"/>
+    <svg-icon name="question" @click="goto"/>
   </div>
 </template>
 <script setup>

src/components/Zr/Git/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <svg-icon icon-class="github" @click="goto" />
+    <svg-icon name="github" @click="goto" />
   </div>
 </template>
 <script>

src/layout/components/Sidebar/SidebarItem.vue

@@ -3,7 +3,7 @@
     <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
-          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
+          <svg-icon :name="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
           <template v-if="onlyOneChild.meta.title" #title>
             <span>{{ onlyOneChild.meta.title }}</span>
           </template>
@@ -13,7 +13,7 @@
 
     <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template v-slot:title>
-        <svg-icon :icon-class="item.meta && item.meta.icon" />
+        <svg-icon :name="item.meta && item.meta.icon" />
         <span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
       </template>
 

src/views/components/icons/index.vue

@@ -6,7 +6,7 @@
           <el-tooltip placement="top">
             <template #content> {{ generateIconCode(item) }} </template>
             <div class="icon-item">
-              <svg-icon :icon-class="item" style="height: 40px; width: 40px" />
+              <svg-icon :name="item" style="height: 40px; width: 40px" />
             </div>
           </el-tooltip>
         </div>
@@ -37,7 +37,7 @@ for (const key in elIcons) {
 }
 
 function generateIconCode(symbol) {
-  return `<svg-icon icon-class="${symbol}" />`
+  return `<svg-icon name="${symbol}" />`
 }
 function generateElementIconCode(symbol) {
   return `<el-icon><${symbol} /></el-icon>`

src/views/dashboard/PanelGroup.vue

@@ -3,7 +3,7 @@
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
         <div class="card-panel-icon-wrapper icon-people">
-          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+          <svg-icon name="peoples" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text" v-waves>在线用户</div>
@@ -14,7 +14,7 @@
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('messages')">
         <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="message" class-name="card-panel-icon" />
+          <svg-icon name="message" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text" v-waves>消息</div>
@@ -25,7 +25,7 @@
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('purchases')">
         <div class="card-panel-icon-wrapper icon-money">
-          <svg-icon icon-class="money" class-name="card-panel-icon" />
+          <svg-icon name="money" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text" v-waves>金额</div>
@@ -36,7 +36,7 @@
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('shoppings')">
         <div class="card-panel-icon-wrapper icon-shopping">
-          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+          <svg-icon name="shopping" class-name="card-panel-icon" />
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text" v-waves>订单</div>

src/views/login.vue

@@ -6,21 +6,21 @@
       <el-form-item prop="username">
         <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
           <template #prefix>
-            <svg-icon icon-class="user" class="el-input__icon input-icon" />
+            <svg-icon name="user" class="el-input__icon input-icon" />
           </template>
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
         <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码" @keyup.enter="handleLogin">
           <template #prefix>
-            <svg-icon icon-class="password" class="el-input__icon input-icon" />
+            <svg-icon name="password" class="el-input__icon input-icon" />
           </template>
         </el-input>
       </el-form-item>
       <el-form-item prop="code" v-if="captchaOnOff != 'off'">
         <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleLogin">
           <template #prefix>
-            <svg-icon icon-class="validCode" class="el-input__icon input-icon" />
+            <svg-icon name="validCode" class="el-input__icon input-icon" />
           </template>
         </el-input>
         <div class="login-code">

src/views/system/menu/index.vue

@@ -37,7 +37,7 @@
       <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
       <el-table-column prop="icon" label="图标" align="center" width="100">
         <template #default="scope">
-          <svg-icon :icon-class="scope.row.icon" />
+          <svg-icon :name="scope.row.icon" />
         </template>
       </el-table-column>
       <el-table-column prop="menuType" label="类型" align="center" width="80">
@@ -127,7 +127,7 @@
                 <template #reference>
                   <el-input v-model="form.icon" placeholder="点击选择图标" @click="showSelectIcon" readonly>
                     <template #prefix>
-                      <svg-icon v-if="form.icon" :icon-class="form.icon" class="el-input__icon" />
+                      <svg-icon v-if="form.icon" :name="form.icon" class="el-input__icon" />
                       <el-icon class="el-input__icon" v-else>
                         <search />
                       </el-icon>

src/views/system/user/profile/index.vue

@@ -14,29 +14,29 @@
             </div>
             <ul class="list-group list-group-striped">
               <li class="list-group-item">
-                <svg-icon icon-class="user" />用户名称
+                <svg-icon name="user" />用户名称
                 <div class="pull-right">{{ state.user.userName }}</div>
               </li>
               <li class="list-group-item">
-                <svg-icon icon-class="phone" />手机号码
+                <svg-icon name="phone" />手机号码
                 <div class="pull-right">{{ state.user.phonenumber }}</div>
               </li>
               <li class="list-group-item">
-                <svg-icon icon-class="email" />用户邮箱
+                <svg-icon name="email" />用户邮箱
                 <div class="pull-right">{{ state.user.email }}</div>
               </li>
               <li class="list-group-item">
-                <svg-icon icon-class="tree" />所属部门
+                <svg-icon name="tree" />所属部门
                 <div class="pull-right">{{ state.user.deptName }} / {{ state.postGroup }}</div>
               </li>
               <li class="list-group-item">
-                <svg-icon icon-class="peoples" />所属角色
+                <svg-icon name="peoples" />所属角色
                 <div class="pull-right">
                   <span v-for="item in state.roles" :key="item">{{ item }}</span>
                 </div>
               </li>
               <li class="list-group-item">
-                <svg-icon icon-class="date" />创建日期
+                <svg-icon name="date" />创建日期
                 <div class="pull-right">{{ state.user.createTime }}</div>
               </li>
             </ul>

src/views/tool/build/index.vue

@@ -1,3 +1,3 @@
 <template>
-   <div> 表单构建，敬请期待... <svg-icon icon-class="build" /> </div>
+   <div> 表单构建，敬请期待... <svg-icon name="build" /> </div>
 </template>