Vue3+Vite 全局封装Svg图标

1. 安装依赖

 npm i vite-plugin-svg-icons -D

2. 配置

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

export default defineConfig({
    plugins: [
        vue(),
        createSvgIconsPlugin({
          // 指定项目内图标路径
          iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
          // 指定图标引用的格式
          symbolId: 'icon-[dir]-[name]',
        })
    ],
})

// avg插件需要配置代码
import 'virtual:svg-icons-register';

3. 引用

<script lang="ts" setup>

</script>

<template>
    <h1>主页</h1>
    <!--   svg：图标的外层容器节点，内部需要与use标签结合使用     -->
    <svg style="width: 200px;height: 300px;">
        <!--    xlink:href执行用哪一个图标    -->
        <use xlink:href="#icon-phone"></use>
    </svg>
</template>

<style scoped>

</style>

页面效果

4. 可能出现的配置错误

error：缺少fast-glob依赖

解决方法：安装好fast-glob依赖即可

npm i fast-glob