封装SVG
SVG是什么?
SVG可缩放矢量图形(Scalable Vector Graphics),用来描述二维矢量及矢量图形。
它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言。
第一步
在vue.config.js里去配置
const path=require('path')
function resolve(dir){
return path.join(__dirname,dir)
}
module.exports={
chainWebpack: config => {
config.module.rules.delete('svg')
config.module
.rule('svg-icon')
.test(/\.svg$/)
.include.add(resolve('src/assets/icon'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options( {
symbolId:'[name]'
})
}
}
第二步
将下载好的svg格式图片放入到assets中
第三步
<template>
<div>
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href=" '#' + name"></use>
</svg>
</div>
</template>
<script>
const req = require.context("@/assets/icon", false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);
export default {
name:"IconFont",
props: {
name: {
type: String,
default: ""
},
size: {
type: Number,
default: 200
}
}
}
</script>
最后,在你所想使用的页面引入对应的svg-icon组件就可以使用对应的图标了。