Vue封装全局SVG组件

1.SVG图标配置

1.安装插件

npm install vite-plugin-svg-icons -D

2.Vite.config.ts中配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

3.main.ts中导入

//SVG插件必须的配置
import 'virtual:svg-icons-register'

4.组件内使用

1.下载svg代码

阿里巴巴图标库或者其他图标库下载SVG代码,复制到对应的文件中

2.SVG使用

<template>
  <div>
    <!-- svg:图标的外层节点,内部需要于use标签结合使用 -->
    <svg style="width: 30px; height: 30px;">
      <!-- xlink:href执行用的图标,属性务必是#icon-图标名字 -->
      <!-- use标签的fill属性为图标的颜色填充 -->
      <use xlink:href="#icon-base" fill="blue"></use>
    </svg>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>

2.SVG组件封装

1.创建组件文件

2.封装组件 

<template>
  <svg :style="{ width, height }">
    <use :xlink:href="prefix + name" :fill="color"></use>
  </svg>
</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: '16px'
  },
  //svg高度
  height: {
    type: String,
    default: '16px'
  }
})
</script>

<style scoped lang="scss"></style>

3.在其他组件使用

<template>
  <div>
    <SvgIcon name="base" width="30px" height="30px" color="blue"></SvgIcon>
  </div>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/Svg/index.vue'
</script>

<style scoped lang="scss"></style>

3.SVG组件注册为全局组件

1.创建文件

2.注册全局组件

//引入全局组件
import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';
//全局对象
const components: { [name: string]: Component } = { SvgIcon };
//对外暴露插件对象
export default {
    //insatll方法
    install(app: App) {
        //注册项目为全局组件(可注册多个)
        Object.keys(components).forEach((key: string) => {
            //注册全局组件
            app.component(key, components[key]);
        })
    }
}

3.引入到main.ts

import gloablComponent from './components/index';
app.use(gloablComponent);

4.组件中使用

<template>
  <div>
    <SvgIcon name="base" width="30px" height="30px" color="blue"></SvgIcon>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>