Vue 整合 Svg 图标

1、安装 svg 依赖插件

shell

npm i vite-plugin-svg-icons -D

2、在项目中的 vite.config.ts 文件中添加 svg 配置项

javascript

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'// 引入svg插件 
import path from 'path'   //引入path

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
        createSvgIconsPlugin({  
            // 指定需要缓存的图标文件夹
            iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],  
            // 指定symbolId格式
            symbolId: 'icon-[dir]-[name]',  
        }),  
    ],
})

3、在 main.ts 中添加 svg 配置代码

javascript

import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'virtual:svg-icons-register'   // 导入 svg 需要的配置代码

// 引入自定义插件对象：注册整个项目全局组件
import gloalComponent from './components/index'

createApp(App)
    .use(gloalComponent)   //安装自定义插件
    .use(ElementPlus)
    .mount('#app')

4、下载 svg 图标并保存在项目中

只要下载 svg 图标，就可以添加使用。互联网上有不少免费的图标库，下载之后还可以微调进行使用。这里我使用阿里图标库

5、图标统一存放在 src/assets/icons 文件夹中管理。

下载之后，将 svg 复制到项目中的 src/assets/icons 文件夹下创建文件，将 svg 代码粘贴，并进行调整。

6、在 components 文件夹中创建 .vue 文件，封装 svg 组件。

SvgIcon.vue

vue

<!-- 
  封装svg组件
    参数1：name（必传）
    参数2：color（默认为svg原本颜色）
    参数3：width（默认16px）
    参数4：height（默认16px）
 -->
<template>
  <svg :style="{ width,height }">
    <use :href="prefix + name" :fill="color"></use>
  </svg>
</template>

<script setup>

  // 接收父组件传递过来的参数
  defineProps({
    prefix: {
      type: String,
      default: '#icon-'
    },
    name: String,
    color: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '16px'
    },
    height: {
      type: String,
      default: '16px'
    }
  })

</script>

<style scoped>

</style>

7、将封装好的 svg 组件引入到之前封装的全局组件统一管理的文件中

components/index.js

javascript

import SvgIcon from "~/components/SvgIcon.vue";

const allGlobalCom = { SvgIcon };

export default {
  install(app) {
    Object.keys(allGlobalCom).forEach((key) => {
      app.component(key, allGlobalCom[key]);
    });
  },
};

8、即可在其他组件中直接使用

参考

https://blog.csdn.net/m0_64378190/article/details/136478352

Vue 整合 Svg 图标 ​

参考 ​

Vue 整合 Svg 图标

参考