vue2+vue3封装使用svg图标

需求：1.在vue2中封装使用svg

           2.在vue3中封装使用svg

           3.在vue3中使用自定义插件封装多个组件

注意！！！地址一定要对应好，不然容易报错

1.获取svg图标操作（公共操作）

 在阿里巴巴矢量图标库找自己需要的svg图标

地址：阿里巴巴矢量图标库

随便找个图标点击下载

选择好尺寸后就可以点击复制svg代码了 

 

 在assets下创建icons文件夹，并且新建svg文件，文件名任意

 把复制好的svg代码贴到svg文件中

2.在vue2中封装使用SVG

2.1下载svg插件，我直接下载的最新版6.0.11版本

npm install svg-sprite-loader

 2.2在component文件夹下==》新建SvgIcon文件夹==》并且新建index.vue

2.3在assets文件夹下新建index.js

import Vue from 'vue'
import SvgIcon from '../components/SvgIcon'// svg封装地址
 
// register globally
Vue.component('svg-icon', SvgIcon)
//./icons的地址就是存放svg图标的文件地址
 
const req = require.context('./icons', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

2.4 在vue.config.js文件中导入

之前跟着网上导入后resolve报错，如果有报错就和我一样添加path就行

!!!注意！！这里的resolve地址就是存放svg的文件地址

const { defineConfig } = require('@vue/cli-service')
const path = require('path');
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack (config) {
    config.module
      .rule('svg')
      .exclude.add(path.resolve('src/aseets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(path.resolve('src/aseets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }

})

2.5在main.js中导入icons注册的index.js文件

import "./assets/index";

2.6 页面使用

注意这个loading一定要和svg文件名（你自己取的名字）一致

 

 2.7 效果

 2.8 问题：为什么颜色写了不起作用

打开svg文件，找到fill=“”，之后删除就可以了，如果人家svg自带颜色你写的时候不生效就去删了就行

3.在vue3中封装使用SVG

！！！注意：如果配置好之后报错Cannot find package ‘fast-glob’

只需要执行命令:  npm i fast-glob   进行下载就可以了

3.1下载svg插件

npm install vite-plugin-svg-icons

3.2 在vite.config.ts中导入使用

// 配置svg依赖插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],//svg的文件存放路径
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
  },
});

3.3在main.ts中引入svg插件

// svg插件需要的配置代码
import 'virtual:svg-icons-register'

3.4 在component文件夹下创建SvgIcon文件

并添加index.vue

在这里我写了俩种前缀方法，可自行选择一种

3.5 在main.ts中导入注册

这里我修改了一个，使用的是@/引入方式，如果报错的话就用../就行

import SvgIcon from "@/components/SvgIcon/index.vue"
// 将应用挂载到挂载点上
app.component('SvgIcon',SvgIcon);

3.6 页面使用

在你需要svg的页面中直接使用就可以了

注意：这个name=“edit”的edit是icons文件下创建的叫edit.svg的文件名

3.7 效果

 

 4.使用自定义插件封装多个组件

4.1 在component文件夹下创建index.ts文件

其中：import SvgIcon from './SvgIcon/index.vue';
import Pagination from './Pagination/index.vue';这俩个就是之前封装好的svg组件内容还有个分页封装的内容

// 对外暴露插件对象
import SvgIcon from './SvgIcon/index.vue';
import Pagination from './Pagination/index.vue';
const allGlobalComponents: any = { SvgIcon, Pagination };

export default {
  // 必须交install方法
  install(app: any) {
    // 有几个组件就注册几次
    Object.keys(allGlobalComponents).forEach((key) => {
      console.log(key);
      app.component(key, allGlobalComponents[key]);
    });
  },
};

4.2 在main.ts中导入并使用

import globalComponent from '@/components'
app.use(globalComponent);

4.3 使用

无需导入，在页面可直接使用

4.3 效果

5.源码地址

node 的版本要大于16以上就可以了，vue3用的是pnpm安装的，vue2用的是npm，源码这边我就写了vue2和vue3的封装，vue3自定义插件封装可以根据上面代码进行更改~

vue2-vue3-svg: vue2和vue3的svg封装代码 (gitee.com)

文章到此结束希望对你有所帮助~