svg配置与使用

安装svg

npm i svg-sprite-loader@4.1.3

封装svg
在components中新建SvgIcon文件新建index.vue文件

<template>

<!-- 当组件的根元素不具备一些DOM事件，但是根元素内部元素具备相对应的DOM事件，那么可以使用$listeners获取父组件传递进来的所有事件函数，再通过v-on="xxxx"绑定到相对应的内部元素上即可。 -->

  <svg :class="svgClass" v-on="$listeners">

    <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>

在src文件下创建icons文件,创建svg文件放图标,
在icons文件下新建一个index.js文件导出图标

import Vue from 'vue'

import SvgIcon from '../components/SvgIcon'

// 自动加载svg中所有的图标

// context返回一个指定目录的加载方法,是否要递归,匹配的后缀名

const req = require.context('./svg', false, /\.svg$/) // webpack方法

// keys() 返回指定上下文中所有匹配文件名称

req.keys().forEach((item) => req(item)) // 遍历所有文件名并require自动加载

// console.log(req)

// console.log(req.keys())

// req.keys().map(req)

  

// 注册svg-icon组件

Vue.component('SvgIcon', SvgIcon)

在vue.config.js中配置

const path = require('path')

const selfResolve = (dir) => path.resolve(__dirname, dir)

  

module.exports = {

  transpileDependencies: true,

  lintOnSave: false,

  devServer: {

.....

  },

  //

  

  chainWebpack(config) {

    config.resolve.alias

      .set('comps', selfResolve('src/components')) // 配置别名)

      .set('@', selfResolve('src'))

    // npm i svg-sprite-loader -D 将import进来的图标打包到库里 将来直接引用图标的id

    // vue inspect 帮助快速审查webpack配置

    // vue inspect --rules 查看规则

    // vue inspect --rule svg 查看svg配置

    // 1. 阻止svg规则加载icons/svg中的图标

    config.module.rule('svg').exclude.add(selfResolve('src/icons'))

  

    // 2. 配置svg-sprite-loader仅加载icons/svg中的图标

    config.module

      .rule('icons') // 规则存在就查询，不存在就创建

      .test(/\.svg$/) // 仿照vue inspect --rule svg 审查语法来写 所有以svg结尾的import使用这个规则

      .include.add(selfResolve('src/icons'))

      .end() // 找回this上下文 -- 当前的icons规则

      .use('svg-sprite-loader') // 先use再loader

      .loader('svg-sprite-loader')

      .options({ symbolId: 'icon-[name]' }) // 使用图标的方式 icon-文件名

  },

}

使用

<SvgIcon icon-class="sanjiao3"></SvgIcon>
icon-class后写svg文件名称