Vue3+TS中svg图标的使用

安装依赖

 pnpm i vite-plugin-svg-icons -D

配置引入

vite.config.ts

...
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'node:path'const svgIconsPlugin = createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],symbolId: 'icon-[dir]-[name]',  // 支持目录层级：'icon-[dir]-[name]'inject: 'body-last',            // DOM插入位置customDomId: '__svg_icons'      // 自定义容器ID
})
// https://vite.dev/config/
export default defineConfig({plugins: [...,svgIconsPlugin,],...,
})

main.ts

// svg 图标插件模块引入
import 'virtual:svg-icons-register'

应用

简单应用

• 在 src/assets/ 目录下创建 icons 文件夹
• 在网上找到想要使用的 svg 图标，复制其 svg 代码
• 在之前创建的 icons 文件夹下创建 xxx.svg 文件
• 粘贴复制的 svg 代码到 xxx.svg 文件里

<template><svg style="width: 16px; height: 16px">//#icon-svg文件名  fill字段 指定图标颜色<use xlink:href="#icon-add" fill="red"></use></svg>
</template>

add代表的是创建的svg文件名

参考地址：https://blog.csdn.net/lawidn56/article/details/145929471

封装成组件

• 准备 svg 文件到目录 src/assets/icons/

• 创建组件目录文件 src/components/SvgIcon/index.vue

  <template><svg :style="{ width, height }"><use :xlink:href="prefix + name" :fill="color" /></svg>
  </template><script setup lang="ts">
  // 接收父组件传递过来的参数
  defineProps({// 图标前缀(xlink:href属性值前缀)prefix: {type: String,default: '#icon-'},// 图标名称name: String,// 图标颜色color: {type: String,default: '#333'},// 图标大小width: {type: String,default: '16px'},height: {type: String,default: '16px'}
  })
  </script>
  

• 使用组件
  xxx.vue

  <template><svg-icon width="32" height="32" name="home" color="red"></svg-icon>
  </template><script setup lang="ts">
  import SvgIcon from '@/components/SvgIcon/index.vue'
  </script>
  

注册全局组件

• 简单注册：main.ts 中注册全局组件，其他 vue 文件直接使用

const app = createApp(App)// 注册 svg 图标全局组件
import SvgIcon from '@/components/SvgIcon/index.vue'
app.component('SvgIcon', SvgIcon)app.mount('#app')

• 多个组件注册
  • src/components/ 下创建 index.ts 文件
  • main.ts 中注册全局组件
  • vue 文件直接使用

src/components/index.ts

// 引入所有组件
import SvgIcon from './SvgIcon/index.vue'
import Xxx from './Xxx/index.vue'
import type { App, Component } from 'vue'
// 引入所有组件，统一注册
const allGlobalComponent: Record<string, Component> = {SvgIcon,Xxx
}
// 对外暴露插件对象
export default {// 必须叫做 install 方法install(app: App) {// 遍历所有自定义组件Object.keys(allGlobalComponent).forEach(key => {// 注册为全局组件app.component(key, allGlobalComponent[key])})}
}

main.ts

const app = createApp(App)// 引入自定义插件对象，注册整个项目全局组件
import globalComponent from '@/components';
// 安装自定义插件
app.use(globalComponent); // 会触发全局组件的 install 方法app.mount('#app')