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

一、文章引导

二、博主简介

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

---

三、文章内容

(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"
    :style="{ width: width, height: height }"
  >
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    width: {
      type: String,
      default: "16px",
    },
    height: {
      type: String,
      default: "16px",
    },
  },
  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" width="20px" height="20px"></svg-icon>

---

四、程序语录

---

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