vue3后台管理框架之svg封装为全局组件

因为项目很多模块需要使用图标,因此把它封装为全局组件！！！

在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源,

这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。

安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

在vite.config.ts中配置插件

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

入口文件导入

import 'virtual:svg-icons-register'

svg封装为全局组件

在src/components/SvgIcon目录下创建一个SvgIcon组件:代表如下

 
<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>style>

解决办法

'vue/comment-directive': 'off',

在src文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件！！！

 
import SvgIcon from './SvgIcon/index.vue';
  import type { App, Component } from 'vue';
  const components: { [name: string]: Component } = { SvgIcon };
  export default {
  install(app: App) {
  Object.keys(components).forEach((key: string) => {
  app.component(key, components[key]);
  })
  }
  }

在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件

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