项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图,但是svg不能直接像image标签一样直接使用,这就需要前端的同学自己处理了。
svg有以下优点:
- svg放大不失真,png,jpg会出现失真现象
- svg的体积非常小,对有大量图标图片的页面体验友好
- 图像文件可读,易于修改和编辑
- svg文件还可嵌入JavaScript脚本来控制svg对象
那这么好的东西怎么在前端vue项目中使用呢? 下面就来个最佳实践:
1.安装svg-sprite-loader
npm install svg-sprite-loader
2、webpack 配置(vue.config.js)
chainWebpack: config => {
// 别名设置
config.resolve.alias
.set('@', resolve('src'))
.set('@assets', resolve('src/assets'))
.set('@views', resolve('src/views'))
.set('@components', resolve('src/components'))
.set('@images', resolve('src/assets/images'))
.set('@utils', resolve('src/utils'))
config.module
.rule('svg')
.exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(path.join(__dirname, 'src/assets/icons/svg'))
.end()
.use('svg-sprite')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
svgo: {
plugins: [
{
removeViewBox: false
}
]
}
})
.end()
},
注意:这里的chainWebpack对象是跟devServer是平级的对象
3、创建、注册和导出svg的组件
- 创建svg组件:这里我直接在view下面的目录创建了svg组件文件夹,当然你可以选在在common或者components下
代码为:
<template>
<i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" />
<svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners">
<use :xlink:href="`#icon-${iconFileName}`" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconFileName: {
type: String,
required: true
}
}
}
</script>
<style scoped>
.svg-icon {
width: 14px;
height: 14px;
overflow: hidden;
/* vertical-align: -0.15em; */
fill: currentColor;
}
</style>
- 注册svg组件:
具体代码如下:
import Vue from 'vue'
import SvgIcon from '@/svgIcon'
Vue.component('svg-icon', SvgIcon)
const req = require.context('@/assets/icons/svg', false, /\.svg$/)
const requireAll = requireContext => {
// requireContext.keys()数据:svg文件夹下面的
requireContext.keys().map(requireContext)
}
requireAll(req)
4、main.js
//引入整个icons,
import './assets/icons/index'
当然你你也可以在main中引入并注册svg组件,我是为了方便维护把功能抽到了icon文件下面了
5、组件中使用
<svg-icon class="image" icon-file-name="heart"></svg-icon>
组件属性的icon-file-name的值就是svg文件的名字。
好的,就可以方便的使用svg了