Vue中使用SVG-ICON的配置方法

在Vue中使用svg-icon，可以按如下配置即可。

1、src/components/SvgIcon目录下创建index.vue，代码如下：

<template>
<svg :class=\”svgClass\” aria-hidden=\”true\” v-on=\”$listeners\”>
<use :xlink:href=\”iconName\” rel=\”external nofollow\” />
</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>

2、src/assets/icons/下创建index.js，代码如下：

import Vue from \’vue\’
import SvgIcon from \’@/components/SvgIcon\’// svg组件
// register globally
Vue.component(\’svg-icon\’, SvgIcon)
const req = require.context(\’./svg\’, false, /\\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

3、src/assets/icons/svg目录下，放置用到的svg图片文件，如图中user.svg

4、main.js文件中增加对icons的引用，代码如下：

import \’./assets/icons\’

5、build目录中的webpack.base.conf.js的module.rules节点中增加如下代码：

{
test: /\\.svg$/,
loader: \’svg-sprite-loader\’,
include: [resolve(\’src/assets/icons\’)],
options: {
symbolId: \’icon-[name]\’
}
},
{
test: /\\.(png|jpe?g|gif|svg)(\\?.*)?$/,
loader: \’url-loader\’,
exclude: [resolve(\’src/assets/icons\’)],
options: {
limit: 10000,
name: utils.assetsPath(\’img/[name].[hash:7].[ext]\’)
}
},

6、config目录中的index.js的build节点中增加如下代码：

chainWebpack(config) {
// set svg-sprite-loader
config.module
rule(\’svg\’)
.exclude.add(resolve(\’src/assets/icons\’))
.end()
config.module
.rule(\’icons\’)
.test(/\\.svg$/)
.include.add(resolve(\’src/assets/icons\’))
.end()
.use(\’svg-sprite-loader\’)
.loader(\’svg-sprite-loader\’)
.options({
symbolId: \’icon-[name]\’
})
.end()
}