vue3 vite项目中svg的封装和使用

vue3项目中svg的封装和使用

1.安装依赖插件

npm install vite-plugin-svg-icons -D

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"

// 1.引入svg插件
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"

export default defineConfig({
  plugins: [vue(),
  createSvgIconsPlugin({
    iconDirs: [path.resolve(process.cwd(), "src/assets/icons")], //路径
    symbolId: "icon-[dir]-[name]"
  })
  ],
  server: {
    port: 880,
    proxy: { d: '' }
  },

  resolve: {
    alias: {
      "@": path.resolve('./src') //相对路径取别名 @代替src位置
    }
  }
})

3.挂载svg到main.ts中

import 'virtual:svg-icons-register';

4.简单使用

//  fill无法修改图标颜色时，删掉svg文件下的fill属性
<use xlink:href="#icon-phone"  fill="red"></use>

5.封装svg组件 components/SvgIcon.vue中

<template>
  <div>
    <svg :style="{ width: width, height: height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>
<script setup lang="ts">
defineProps({
  //xlink:href属性值的前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  //svg矢量图的名字
  name: String,
  //svg图标的颜色
  color: {
    type: String,
    default: ''
  },
  //svg宽度
  width: {
    type: String,
    default: ''
  },
  //svg高度
  height: {
    type: String,
    default: ''
  }

})
</script>
<style scoped></style>

6. 挂载全局

import { createApp } from 'vue'
import SvgIcon from '@/components/SvgIcon.vue'
 const app = createApp(App).component('SvgIcon',SvgIcon)

7.使用svg

 <svg-icon name="iconName" width="18px" height="18px" />