vue svg

# vue 中 svg 的使用

# 1. 安装依赖

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

# 2. 添加配置

vue.config.js

 chainWebpack: (config) => {
    // svg是个基础loader
    const svgRule = config.module.rule("svg");

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear();

    // 添加要替换的 loader
    svgRule
      .test(/\.svg$/)
      .include.add(resolve('src/icons')).end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .tap((options) => {
        // eslint-disable-next-line no-param-reassign
        options = {
          symbolId: 'icon-[name]',
        };
        return options;
      });
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 3.创建公共组件

components/IconSvg.vue

<template>
  <svg class="svg-icon" :style="iconStyle" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: "icon-svg",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    iconStyle: {
      type: String,
      default: "",
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
  },
};
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 4.创建 svg 文件夹

icons/index.js

import Vue from "vue";
//引入svg组件
import IconSvg from "@/components/IconSvg";

//全局注册icon-svg
Vue.component("icon-svg", IconSvg);

const requireAll = (requireContext) =>
  requireContext.keys().map(requireContext);
const req = require.context("./svg", false, /\.svg$/);
requireAll(req);

1
2
3
4
5
6
7
8
9
10
11

icons/svg/***svg 存放 svg 文件

# 5. 使用

<icon-svg iconClass="title" iconStyle="width:100px;height:100px;"></icon-svg>

# vue中使用svg遇到问题

# 1. vue-cli3运行时会加载node_modules下的svg报错问题

解决办法：依赖的npm包(mavon-editor)使用main.js全局导入,而不是页面中局部import：

import mavonEditor from 'mavon-editor';

Vue.use(mavonEditor)

1
2
3

更新时间: 3/22/2021, 4:43:19 PM

← vue防抖节流 vue图片→