vue项目中如何使用SVG图标

IconFont使用的不足：图标添加、修改、删除以后在线链接需要更新离线资源需要重新下载项目代码需要同步更新。

在项目不断更新和迭代的过程中，图标的增减变化还没有稳定的情况下，开发人员的工作效率会明显下降。

那么有没有一个图标应用方式，就是开发人员如果新增，修改，删除某一图标，那么就仅仅只是操作这一目标图标即可。如果有新增，则直接从图标平台上下载新增图标到项目目录中，如果有修改，则直接将修改以后的图标将项目中原有的图标内容进行替换。如果是删除，则直接将图标从项目目录中进行直接删除即可。

那么以下的方法就可以解决这个问题：

那么在vite环境中的vue3项目中，如何实现svg图标的使用。

第一步：下载

npm i vite-plugin-svg-icons -D

第二步：修改vite.config.ts文件

iconDirs的作用就是扫描项目指定目录中的svg图标资源文件

注意：需要通过path.resolve将相对路径转换成绝对路径方可成功

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

export default defineConfig({
    Plugins:[
        vue(),
        createSvgIconsPlugin({
            iconDirs:[
                path.resolve(
                    process.cwd(),
                    'src/assets/svg-icons'
                )
            ]
        })
    ]
})

第三步：封装使用SVG的组件（src/components/SvgIcon.vue）

该组件接收prefix前缀，name名称，color颜色三个属性。prefix和name名称将会进行computed计算。symbolId将会标致将会使用那个svg图标，而color颜色将会运行开发人员对图标进行颜色的设置操作。

<template>
    <svg aria-hidden="true">
        <use
        :href="symbolId"
        :fill="color"
        />
    </svg>
</template>
<script lang="ts">
export default {
    name:"SvgIcon",
};
</script>
<script setup lang="ts">
import { computed } from "vue";
const props = defineProps({
    prefix:{
        type:String,
        default:"icon",
    },
    name:{
        type:String,
        require:true,
    },
    color:{
        type:String,
        default:"#333",
    },
});
const symbolId = computed(
    () => `#${props.prefix}-${props.name}`
)
</script>

第四步：项目入口文件main.ts

在这里需要引入SvgIcon组件，并使用app.component()进行全局注册，

并将virtual:svg-icons-register进行引入，利用它进行SvgIcon功能脚本的注入操作。

import { createApp } from "vue";
import App from './App.vue';
import SvgIcon from './components/SvgIcon.vue';
import "virtual:svg-icons-register";

const app = createApp(App);
app.component(SvgIcon.name,SvgIcon);
app.mount('#app');

第五步：下载图标

现在可以从IconFont图标库中下载一些图标，并放到指定的目录中

第六步：应用

直接调用SvgIcon组件就可以进行直接的使用了。

<template>
    <SvgIcon name="home" color="yellow" />
    <SvgIcon name="video" />
    <SvgIcon name="cat-octocat" />
</template>