vue项目封装svg组件

2023-06-03 16:05| 来源: 网络整理| 查看: 265

使用阿里巴巴 iconfont 官网提供的图标下载图片格式的，宽高变化的时候，图片会失真。最好使用svg格式的，自适应还保真且可以调整样式。但是每次使用一个图片，下载并导入文件中使用实在是太麻烦。下面配合使用svg-sprite-loader 包，封装svg组件：

npm i -D svg-sprite-loader

在components文件下新建 IconSvg文件夹，新建index.vue

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%` } } } } .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; }

在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-sprite-loader 将 svg 文件内容放到了 body 下面,将加载的 svg 图片拼接成雪碧图，其它地方通过复用

SVG中有四个主要的元素用于在文档中定义、结构化和引用SVG代码：, , 和。

元素（“group”的简写），用于给逻辑上相联系的图形元素分组。元素用来定义你之后要重用的元素。元素结合了和元素的优点，将定义模板的元素组合在一起，以便之后在文档中的其他位置引用。比其它两个元素有一个非常重要的优点：它接受一个viewBox属性，可以让它在任何视窗中自适应大小缩放渲染。元素用于引用文档中其它位置定义的元素。你可以重用已有的元素，类似于图形编辑器中的复制粘贴功能。它可以重用单个元素，也可以重用一组用、或定义的元素。要使用一个元素，你需要通过一个标识对该元素进行引用——一个ID，即use中的xlink:href属性，以及用来给该元素定位的x和y属性。你可以给use元素应用样式，这些样式也会级联应用到use元素的内容中去。

【本文地址】

公司简介

联系我们