Vue3+cli 如何利用包来导入svg svg-sprite-loader

原创已于 2023-02-20 12:22:48 修改 · 452 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2023-01-02 16:47:46 首次发布

JavaScript 同时被 2 个专栏收录

10 篇文章

订阅专栏

5 篇文章

订阅专栏

文章介绍了如何在Vue项目中通过vue3svg-sprite-loader来管理SVG图标，避免iconfont的不稳定问题。步骤包括安装插件、创建Svgicon组件、配置webpack以及在main.js中引入和使用SVG图标。

因为之前很多时候都是通过iconfont 来管理格式的图标，但是未免也有不稳定的时候，通过vue3 svg-sprite-loader 来管理svg 同样也很方便

需求：

将ui发送的svg文件应用到页面上，vue 如何解析svg文件

使用步骤：

1、安装插件

npm install svg-sprite-loader --save-dev

2、新建存放svg目录地址

方便后面演示内容，在此处固定一个目录地址，可以根据自己的习惯进行调整，并对后面代码进行修改

3、创建Svgicon.vue：

<template>
  <!-- v2 需要使用$listeners，$attrs是v3 的写法 -->
  <!-- 将父组件的事件传递到自己身上 并传递给子组件 -->
  <svg :class="svgClass" aria-hidden="true" v-on="$attrs">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ""
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    }
  }
};
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

4、在同级目录下创建index.js

写法为V3 写法，v2 不适用，修改即可

const requireAll = requireContext => requireContext.keys().map(requireContext)

import Svgicon from './Svgicon.vue'
// 如果不需要深层查找则修改为false即可
const req = require.context('./svg', true, /\.svg$/)
export default {
    install(app) {
        requireAll(req);
        app.component('svg-icon', Svgicon)   // 挂载在全局
    }
}

5、配置 vue.config.js:

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, '.', dir)
}
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/icons')) //处理svg目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
})

6、在main.js 中引入刚才创建的index.js

import svg from './icons/index'
// ......
createApp(App).use(store).use(svg)//.......

7、使用

 <!-- 名字为目录中svg文件的名字，  class-name自己起的类名方便调整 -->

<svg-icon icon-class="add" class-name="ybp-style"></svg-icon>