1、在components新建common\SvgIcon.vue
<template>
<svg :class="svgClass" aria-hidden="true" preserveAspectRatio="xMaxYMax meet">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
export default {
name: "svg-icon",
props: {
iconClass: { type: String, required: true },
className: { type: String }
},
computed: {
iconName() {
return `#${this.iconClass}`;
},
svgClass() {
if (this.className) {
return "svg-icon " + this.className;
} else {
return "svg-icon";
}
}
}
};
</script>
<style scoped>
.svg-icon {
/* width: 5em;
height: 5em; */
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
2、在src下新建assets\image\icons\svg用于存放.svg文件
3、在src下新建assets\image\icons\index.js
import Vue from 'vue'
import SvgIcon from '../../../components/common/SvgIcon'
/* require.context("./test", false, /.test.js$/);
这行代码就会去 test 文件夹(不包含子目录) 下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
更直白的说就是 我们可以通过正则匹配引入相应的文件模块。
require.context有三个参数:
directory:说明需要检索的目录
useSubdirectories:是否检索子目录
regExp: 匹配文件的正则表达式 */
//全局注册
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
4、在build\webpack.base.conf.js中修改 module\rules
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [path.resolve(__dirname,'../src/assets/image/icons')], //排除字体图标文件
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[ext]')
}
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [path.resolve(__dirname, '../src/assets/image/icons')],
options: {
//symbolId: 'icon-[name]' //这个没有生效,生效的是默认的name
}
},