您现在的位置是:首页 >其他 >vue项目封装svg组件网站首页其他
vue项目封装svg组件
使用阿里巴巴 iconfont 官网提供的图标
下载图片格式的,宽高变化的时候,图片会失真。最好使用svg格式的,自适应还保真且可以调整样式。但是每次使用一个图片,下载并导入文件中使用实在是太麻烦。下面配合使用svg-sprite-loader 包 ,封装svg组件:
npm i -D svg-sprite-loader
在components文件下 新建 IconSvg文件夹,新建index.vue
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
isExternal() {
return /^(https?:|mailto:|tel:)/.test(this.iconClass)
},
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
/* 通过给svg 图形元素设置fill= currentColor 图形元素的颜色会自动继承父级color的颜色 */
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover!important;
display: inline-block;
}
</style>
在src文件夹下新建 icons文件夹,icons 新建子文件夹svg。里面是从iconfont下载的.svg文件,svg文件夹同级新建index,js文件
index.js文件:
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
// 全局注册组件
Vue.component('svg-icon', SvgIcon)
// 全局自动导入所有svg图标
// 这行代码就会去 svg 文件夹(不包含子目录)下面的找所有文件名以 .svg 结尾并能被 require 的文件
const req = require.context('./svg', false, /.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
全局main.js引入 index.js文件
import '@/icons'
vue.config.js中配置:
const path = require('path')
function resolve(dir){
return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}
module.exports = {
chainWebpack: config => {
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons')) // 排除掉其他loader对svg处理
.end()
config.module
.rule('icons')
.test(/.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
项目中使用:
<svg-icon icon-class="save" class-name="icon"></svg-icon>
svg-sprite-loader 将 svg 文件内容放到了 body 下面,将加载的 svg 图片拼接成 雪碧图,其它地方通过 复用
SVG中有四个主要的元素用于在文档中定义、结构化和引用SVG代码:<g>, <defs>, <use> 和 <symbol>。
<g>元素(“group”的简写),用于给逻辑上相联系的图形元素分组。
<defs>元素用来定义你之后要重用的元素。
<symbol>元素结合了<defs>和<g>元素的优点,将定义模板的元素组合在一起,以便之后在文档中的其他位置引用。比其它两个元素有一个非常重要的优点:它接受一个viewBox属性,可以让它在任何视窗中自适应大小缩放渲染。
<use>元素用于引用文档中其它位置定义的元素。你可以重用已有的元素,类似于图形编辑器中的复制粘贴功能。它可以重用单个元素,也可以重用一组用<g>、<defs>或<symbol>定义的元素。
要使用一个元素,你需要通过一个标识对该元素进行引用——一个ID,即use中的xlink:href属性,以及用来给该元素定位的x和y属性。你可以给use元素应用样式,这些样式也会级联应用到use元素的内容中去。