init

src/components/iconSelect/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-select v-model="iconName" placeholder="请选择菜单图标" clearable filterable @change="selectIcon" :teleported="false"
+              class="icon-select">
+    <el-option
+        v-for="item in iconList"
+        :value="item"
+        :label="item"
+    >
+      <svg-icon :name="item" :class-name="'middle-icon'"/>
+      <span class="icon-name">{{ item }}</span>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup>
+import iconArray from './requireIcons.js'
+import SvgIcon from '@/components/svgIcon/index.vue'
+const emit = defineEmits(["getSelectIcon"])
+const props = defineProps({
+  activeIcon: {
+    type: String,
+    default: ''
+  }
+})
+const iconName=ref(props.activeIcon)
+const iconList = ref(iconArray)
+watch(() => props.activeIcon, (value) => {
+  iconName.value = value
+})
+const selectIcon = (val) => {
+  emit("getSelectIcon", val)
+}
+</script>

src/components/iconSelect/requireIcons.js

@@ -0,0 +1,12 @@
+const iconArray=[]
+const files = import.meta.glob("@/assets/svg/*.svg",{eager:true})
+for (const key of Object.entries(files)) {
+  let item =key[0]
+  const lastIndex=item.lastIndexOf("\/")
+  //svg图标名(带后缀svg)
+  item=item.substring(lastIndex+1,item.length)
+  //svg图标名字,剔除后缀.svg
+  item=item.substring(0,item.lastIndexOf("\."))
+  iconArray.push(item)
+}
+export default iconArray