Vue3 项目中 svg 图标的封装及使用

安装

npm install vite-plugin-svg-icons -D

在 vite.config.ts 中配置插件：

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

 plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]'
    })
  ],

在入口文件进行配置：

import 'virtual:svg-icons-register'

使用方法

在assets/icons/ 下引入 svg 格式的文件，并给图标命名。

只需在需要的地方，使用 svg 引入图标即可。需要注意的点是：xlink:href用哪个图标，其属性值必须是 #icon-图标名字。

<svg width="100" height="100">
   <use xlink:href="#icon-music"></use>
 </svg>

组件封装

<template>
    <svg>
        <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
</template>

<script setup lang="ts">
defineProps({
    // xlink:href 前缀
    prefix: {
        type: String,
        default: '#icon'
    },
    // 图标的名字
    name: String,
    // 图标颜色
    color: String
})
</script>

组件的使用

import SvgIcon from '@/components/SvgIcon/index.vue'

<svg-icon name="music" color="pink"></svg-icon>