Vue3：自定义图标选择器（包含 SVG 图标封装）

图标选择器（包含 SVG 图标封装）"/>

Vue3：自定义图标选择器（包含 SVG 图标封装）

文章目录

• • • 一、准备工作（在 Vue3 中使用 SVG）
    • 二、封装 SVG
    • 三、封装图标选择器
    • 四、Demo

一、准备工作（在 Vue3 中使用 SVG）

本文参考：

1. 安装插件

   npm i vite-plugin-svg-icons
   

2. 配置插件

   1. 修改 vite.config.js

      import {resolve} from 'path'
      import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';export default defineConfig({plugins: [vue(),createSvgIconsPlugin({iconDirs: [resolve(process.cwd(), 'public')], // svg 文件存放位置symbolId: 'icon-[name]', // 指定symbolId格式}),],
      })
      

      注意：我的 svg 存放路径是根目录下的 ./public，多数情况下放在 ./src/assets。

   2. 修改 main.js，增加一行代码。

      import 'virtual:svg-icons-register'
      

3. 使用示例

       <svg aria-hidden="true" style="width: 14px; height: 14px"><use :href="`#icon-${menu.icon}`" /></svg>
   

二、封装 SVG

将上述使用示例封装为组件。

1. 在 ./src/components 下创建 Icon.vue

   <script setup>
   const props = defineProps({prefix: {type: String, default: 'icon'},name: {type: String, required: true},color: {type: String},size: {type: String, default: '1em'}
   });const symbolId = computed(() => `#${props.prefix}-${props.name}`);
   </script><template><svg aria-hidden="true" class="svg-icon" :style="'vertical-align:middle;width:' + size + ';height:' + size"><use :href="symbolId" :fill="color"/></svg>
   </template><style scoped>
   .svg-icon {overflow: hidden;fill: currentColor;
   }
   </style>
   

   svg 样式里添加了 vertical-align:middle

2. 使用示例

   <Icon :name="vite"></Icon>
   

三、封装图标选择器

1. 在 ./src/components 下创建 IconSelect.vue

   <script setup>
   import Icon from "@/components/Icon.vue";const props = defineProps({modelValue: {type: String, default: ''},
   });const value = ref(props.modelValue)
   const icons = [];
   const modules = import.meta.glob('../../public/**/*.svg');
   for (const path in modules) {const name = path.split('public/')[1].split('.svg')[0];icons.push(name);
   }const emits = defineEmits(['update:modelValue']);
   const change = (name) => {emits('update:modelValue', name)
   }
   </script><template><el-select v-model="value" @change="change" filterable clearable placeholder="Select Icon"><el-option v-for="item in icons" :key="item" :label="item" :value="item"><span style="float: left"><Icon :name="item" size="30px"></Icon></span><span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item }}</span></el-option></el-select><Icon :name="value" size="32px" style="padding-left: 10px"></Icon>
   </template>
   

   import.meta.glob('../../public/**/*.svg') 用于获取 ./public 路径下各个层级的 .svg 文件。

2. 使用示例（在表单中使用）：

   <el-form-item label="Icon"><IconSelect v-model="obj.icon"></IconSelect>
   </el-form-item>
   

四、Demo

<script setup>
import IconSelect from "@/components/IconSelect.vue";
import Icon from "@/components/Icon.vue";const symbol = ref('')
</script><template>{{ symbol }}<Icon :name="symbol" size="32px" style="padding-left: 10px"></Icon><br/><IconSelect v-model="symbol"/>
</template>