项目源码-Vue3项目08-整合SVG图标

Last Updated on 2025年1月10日 by hangzi

整合SVG图标

1、安装依赖

pnpm add -D fast-glob vite-plugin-svg-icons

2、vite配置SVG相关配置

vite.config.js配置内容：

import {defineConfig} from "vite"
import vue from "@vitejs/plugin-vue"
import {fileURLToPath, URL} from "url";
import {resolve} from "path";

const pathSrc = resolve(__dirname, "src");

import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite";

import {ElementPlusResolver} from "unplugin-vue-components/resolvers";

import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
            imports: ["vue", "vue-router"],
            resolvers: [
                // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({}),
            ],
            // 指定自动导入函数TS类型声明文件路径
            dts: resolve(pathSrc, "types", "auto-imports.d.ts"),
        }),
        Components({
            resolvers: [
                // 自动导入 Element Plus 组件
                ElementPlusResolver(),
                // 自动注册图标组件
                IconsResolver({
                    // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
                    enabledCollections: ["ep"]
                }),
            ],
            // 指定自动导入函数TS类型声明文件路径
            dts: resolve(pathSrc, "types", "components.d.ts"),
        }),
        Icons({
            // 自动安装图标库
            autoInstall: true,
        }),
        createSvgIconsPlugin({
            // 指定需要缓存的图标文件夹
            iconDirs: [resolve(pathSrc, "assets/icons")],
            // 指定symbolId格式
            symbolId: "icon-[dir]-[name]",
        })

    ],
    resolve: {
        alias: {
            // '@': resolve(__dirname, 'src')
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

main.js配置

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

//插件
import setupPlugins from './plugins'

// 本地SVG图标 注册脚本
import 'virtual:svg-icons-register';

createApp(App)
    .use(setupPlugins)
    .mount('#app')

3、SVG 组件封装

在src/components目录下新建 SvgIcon目录 目录下新建index.vue

<template>
  <svg
      aria-hidden="true"
      class="svg-icon"
      :style="'width:' + size + ';height:' + size"
  >
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup>
const props = defineProps({
  prefix: {
    type: String,
    default: "icon",
  },
  iconClass: {
    type: String,
    required: false,
    default: "",
  },
  color: {
    type: String,
    default: "",
  },
  size: {
    type: String,
    default: "1em",
  },
});

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em;
  outline: none;
  fill: currentcolor;
}
</style>

在src/assets目录下新建 icons目录 , 放本地的svg图标

4、使用SVG组件

在src/components/HelloWorld.vue组件下加一组按钮前加SVG图标

  <!-- svg本地图标   -->
  <el-button type="info"><svg-icon icon-class="account" size="1.2em"/>本地图标</el-button>

5、运行效果

项目Demo源码：https://github.com/hangzhi7/Vue3-Demo