svg全局组件

全局注册组件

安装

npm install svg-sprite-loader -D

配置build/webpack.base.conf.js

创建svg组件代码文件

创建index.vue文件将以下内容写入
iconName是svg文件的名字， svgClass是自己定义的类名

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

<script>
    export default {
        name: "index",
        props: ["iconClass", "className"],
        computed: {
            iconName() {
                console.log(this.iconClass);
                return `#icon-${this.iconClass}`
            },
            svgClass() {
                if (this.className) {
                    return `svg-icon ${this.className}`
                } else {
                    return `svg-icon`
                }
            }
        }
    }
</script>

全局注册组件，书写解析文件代码

Vue.component(‘my-component-name’, { /* … */ })
第一个参数是组件的名字，第二个参数是组件代码
解析文件代码：
//require.context:读取指定目录文件
//第一个参数：目录，相对当前文件所读取文件的位置
//第二个参数：是否遍历子集目录
// 第三个参数：定义遍历文件规则

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

创建icon.js文件将以下内容写入

// 引入组件代码
import icon from './index'
Vue.component("svg-icon" ,icon);
//require.context:读取指定目录文件
//第一个参数：目录，相对当前文件所读取文件的位置
//第二个参数：是否遍历子集目录
// 第三个参数：定义遍历文件规则
const req = require.context('./svg', false, /\.svg$/);
const requireAll = requireContext => {
  return requireContext.keys().map(requireContext)
}
requireAll(req)

在main.js引入

import './components/icon/icon'

文件排布

组件使用

<svg-icon :iconClass="svg文件名字" className="自定义class类"/>

参考文件
https://www.bilibili.com/video/av74920232