Vue3 + vite + ElementUI 自定义 svg 图标

要实现使用 svg 图片制作成图标在项目中使用。

 iconName 为svg图片名称

实现步骤如下：

1. 项目版本信息

2. 依赖安装

npm i fast-glob -D

npm i vite-plugin-svg-icons -D

 3. 代码

1）vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
  	vue(),
		createSvgIconsPlugin({
			iconDirs: [path.resolve(process.cwd(), 'src/assets/icon/svg')],
			symbolId: '[name]'
		})
	],
})

 2) main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import SvgIcon from './components/icon-component.vue';
import 'virtual:svg-icons-register';
const app = createApp(App);

app.component('svg-icon', SvgIcon);
app.mount('#app');

3) icon-component.vue

<template>
  <svg :class="'svg-icon ' + ($attrs.iconClass ? $attrs.iconClass : '')" aria-hidden="true">
    <use class="svg-use" :href="'#' + $attrs.iconName" />
  </svg>
</template>

<script setup>

</script>

<style scoped>
  .svg-icon {
    vertical-align: -0.1em;
    /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
    /* fill: currentColor; */
    /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
    overflow: hidden;
    margin : auto auto;
  }
</style>

4) 组件中使用

<script setup>

</script>

<template>
  <div>
    <svg-icon iconName="store" class="iconClass"></svg-icon>
    <svg-icon iconName="check" class="iconClass"></svg-icon>

    <el-input class="w-50 m-2" placeholder="Type something">
      <template #prefix>
<!--        <el-icon class="el-input__icon"><search /></el-icon>-->
        <svg-icon iconName="check" class="iconClass"></svg-icon>
      </template>
    </el-input>

  </div>
</template>

<style scoped>
  .iconClass {
    width: 1.5em;
    height: 1.5em;
  }
</style>

注意 iconName 前不需要加冒号，因为是字符串

4. 实现的效果图

 说明：项目中使用了ElementUI，按它的官方文档写的搭建环境即可。