全局注册组件
安装
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类"/>