svg 在vue 3 项目中的使用以及vue 插件的开发使用

插件的定义

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。

插件的安装

import { createApp } from 'vue' 
const app = createApp({}) 
app.use(myPlugin, { 
    /* 可选的选项 */ 
})

插件的注册及使用

const myPlugin = {
    install(app, options) {
      // 配置此应用
    }
}

插件没有严格定义的使用范围，但是插件发挥作用的常见场景主要包括以下几种：

1. 通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。
2. 通过 app.provide() 使一个资源可被注入进整个应用。
3. 向 app.config.globalProperties 中添加一些全局实例属性或方法
4. 一个可能上述三种都包含了的功能库 (例如 vue-router)。

svg 插件的开发

1. 新建一个svgIcon 组件

<template>
  <svg
    class="svg-icon"
    :style="{
      width: size + 'px',
      height: size + 'px',
      color: color,
    }"
  >
    <use :xlink:href="`#icon-${name}`" :fill="color" />
  </svg>
</template>

<script setup>
import { defineProps} from 'vue'
defineProps({
  name: {
    type: String,
    required: true,
    default: '',
  },
  size: {
    type: Number,
    default: 24,
  },
  color: {
    type: String,
    default: '',
  },
});
</script>

2. 新建一个pluginSvg.js 文件

import SvgIcon from './SvgIcon.vue';

const componentPlugin = {
  install: function (vue, options) {
    if (options && options.imports && Array.isArray(options.imports) && options.imports.length > 0) {
      // 按需引入图标
      const { imports } = options;
      imports.forEach(name => {
        require(`@/assets/svg/${name}.svg`);
      });
    } else {
      // 全量引入图标
      const ctx = require.context('@/assets/svg', false, /.svg$/);
      ctx.keys().forEach(path => {
        const temp = path.match(/./([A-Za-z0-9-_]+).svg$/);
        if (!temp) return;
        const name = temp[1];
        require(`@/assets/svg/${name}.svg`);
      });
    }
    vue.component('SvgIcon', SvgIcon);
  },
};
export default componentPlugin;

3. 安装插件

// main.js

//插件
import plugin from '@/plugin/pluginSvg';


app.use(plugin, {
  imports: [],  // 采用全量引入的方式
});

4. 插件的使用

// svg 文件放到对应文件夹
// 在使用的vue文件中如下面方法引入


// name: svg 文件的名称。size: 图标大小
<SvgIcon name="drag" :size="14" v-if="showIcon" />

初学者：欢迎各位同行大佬指正，或者有更好的方法，还望不吝赐教！！！