全网最详细的vue2引入svg详细步骤

一、文章引导

二、博主简介

🌏博客首页： 水香木鱼
📑文章摘要：svg ?自定义配置svg
💌春波寄语：故木秀于林，风必摧之；堆出于岸，流必湍之；行高于人，众必非之。

---

三、文章内容

本期春波petal为大家带来的是，【 ``】

(1)、安装依赖

注意下载如下版本号??

npm install svg-sprite-loader@6.0.11 --save

(2)、在src下创建icons目录

icons目录结构如下：

创建index.js

import Vue from "vue";
import SvgIcon from "@/components/SvgIcon"; // svg component

// register globally
Vue.component("svg-icon", SvgIcon);

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

(3)、封装SvgIcon组件

<template>
  <svg className="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>
<style>
.svg-icon {
  width: 1.5em;
  height: 1.5em;
}
</style>
<script>
export default {
  props: {
    iconClass: {
      type: String,
      required: true,
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
  },
};
</script>

(4)、全局引用main.js

import "./icons";//自定义图标

(5)、vue.config.js-配置

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack: (config) => {
    // 配置 svg-sprite-loader
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();
  },
}

(6)、使用方式

<svg-icon icon-class="404_2"></svg-icon>

---

四、程序语录

---

本篇博客文章模板唯一版权归属?春波petal