在 Vue 中编写 SVG 图标组件的方法


Posted in Javascript onFebruary 24, 2020

在 Vue 中编写 SVG 图标组件的方法

在考虑了将矢量图标从图标字体迁移到内联 SVG 的 原因 之后,我在 Vue.js 中找到了一个用 SVG 替换图标字体的解决方案,同时仍能保持使用图标字体的灵活性和易用性——能够使用 CSS 轻松改变图标的大小、颜色以及其它属性。

一种流行的方法是使用 v-html 指令和 npm 模块 html-loader 来将 SVG 导入到我们的 Vue 模板中,并在 Vue 的生命周期函数 mounted() 中修改渲染的 <svg> 元素。CSS 样式可以直接应用到 <svg> 元素或者是其父元素上,并且这些能够组成一个可复用的组件。

创建 Svg-icon 组件

让我们创建 Svg-icon.vue 组件文件,并在里面接收三个 prop 变量。

  • icon 是一个字符串类型的 prop 变量用来传递 .svg 文件名的导入
  • hasFill 是一个布尔类型的 prop 变量来告诉组件 fill 属性是否用于更改 <svg> 元素的颜色,默认值为 false 即不使用 fill 属性
  • growByHeight 是一个布尔类型的 prop 变量来决定 height 或 width 是否相对于 font-size 进行缩放,默认值为 true 即使用 height
<script>
function recursivelyRemoveFill(el) {
 if (!el) {
  return;
 }
 el.removeAttribute('fill');
 [].forEach.call(el.children, child => {
  recursivelyRemoveFill(child);
 });
}
export default {
 name: 'svg-icon',
 props: {
  icon: {
   type: String,
   default: null
  },
  hasFill: {
   type: Boolean,
   default: false
  },
  growByHeight: {
   type: Boolean,
   default: true
  },
 },
 mounted() {
  if (this.$el.firstElementChild.nodeName === 'svg') {
   const svgElement = this.$el.firstElementChild;
   const widthToHeight = (svgElement.clientWidth / svgElement.clientHeight).toFixed(2);
   if (this.hasFill) {
    // recursively remove all fill attribute of element and its nested children
    recursivelyRemoveFill(svgElement);
   }
   // set width and height relative to font size
   // if growByHeight is true, height set to 1em else width set to 1em and remaining is calculated based on widthToHeight ratio
   if (this.growByHeight) {
    svgElement.setAttribute('height', '1em');
    svgElement.setAttribute('width', `${widthToHeight}em`);
   } else {
    svgElement.setAttribute('width', '1em');
    svgElement.setAttribute('height', `${1 / widthToHeight}em`);
   }
   svgElement.classList.add('svg-class');
  }
 }
}
</script>

<template>
 <div v-html="require(`html-loader!../assets/svg/${icon}.svg`)" class="svg-container"></div>
</template>

<style lang="scss" scoped>
.svg-container {
 display: inline-flex;
}
.svg-class {
 vertical-align: middle;
}
</style>

我们将 .svg 图标文件通过 require() 传递给 html-loader 方法,该方法会将文件字符串化,并且通过 v-html 指令将其渲染为 <svg> 元素。

所有对 <svg> 元素修改的地方都在 mounted() 生命周期方法里面。

  • 将由 growByHeight 定义的 <svg> 元素的 height 或 width 属性设置为 1em ( font-size 的一倍)并对另一个元素使用 widthToHeight 。由于并非所有的 SVG 都是正方形的,因此我们从渲染的元素计算 withToHeight 比率,以便 SVG 在父元素的 font-size 属性大小改变的时候按比例缩放到其原始尺寸。
  • 为了设置 <svg> 元素的 fill 属性,我们需要覆盖掉 SVG 文件内部附带的 fill 属性。当 hasFill 值为 true 的时候,我们从 <svg> 元素及其子元素中递归地删除 fill 属性。然后使用 CSS 选择器将 fill 值添加到其父元素或 <svg> 元素就可以了。
  • 还可以向元素中添加例如 class 等其它 DOM 属性,这些属性可用于设置组件中的范围样式

创建微笑图标

让我们使用 Font Awesome 和我们的 Svg-icon 组件中的图标字体创建一个微笑图标。

在 Vue 中编写 SVG 图标组件的方法

使用图标字体

<template>
 <i class="fas fa-smile smile-icon"></i>
</template>

<style lang="scss" scoped>
.smile-icon {
 font-size: 24px;
 color: #aaa;

 &:hover {
 color: #666;
 }
}
</style>

.smile-icon 类的 CSS 选择器以及伪类选择器 :hover 来设置图标的 font-size 和 color 属性。

使用 Svg-icon 组件

<script>
import SvgIcon from './components/Svg-icon';

export default {
 name: 'my-component',
 components: {
 'svg-icon': SvgIcon,
 },
}
</script>

<template>
 <div class="smile-icon">
 <svg-icon icon="smile-solid" :hasFill="true"></svg-icon>
 </div>
</template>

<style lang="scss" scoped>
.smile-icon {
 font-size: 24px;
 fill: #aaa;

 &:hover {
 fill: #666;
 }
}
</style>

上面的实现和图标字体方法相同,除了 .smile-icon 类在父元素中,在 Svg-icon 组件中, color 属性被替换为 fill 。我们还必须确保 smile-solid.svg 文件位于 Svg-icon 组件的 require() 方法指定的路径( ./assets/svg/ )中。

渲染成 HTML

这是由 v-html 的输出渲染的 HTML。注意:会删除掉所有的 fill 属性,并将 height 和 width 属性添加到 <svg> 中。

<div class="smile-icon">
 <svg height="1em" width="1em" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="smile" class="svg-inline--fa fa-smile fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
 <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z">
 </path>
 </svg>
</div>

过渡到 SVG

在 Vue 中编写 SVG 图标组件的方法

由于 SVG 被认为是未来的发展方向,因此最好是在保留图标字体的易用性的基础上,逐步放弃使用图标字体。 Svg-icon 组件是一个例子,告诉了我们如何使用可用的库来抽离出 <svg> 元素中的混乱部分,同时模仿使用图标字体的好处!

总结

到此这篇关于在 Vue 中编写 SVG 图标组件的文章就介绍到这了,更多相关vue SVG 图标组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
React实现todolist功能
Dec 28 Javascript
原生javascript中this几种常见用法总结
Feb 24 #Javascript
js实现坦克大战游戏
Feb 24 #Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 #Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 #Javascript
浅谈TypeScript的类型保护机制
Feb 23 #Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 #Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 #Javascript
You might like
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Django视图和URL配置详解
2018/01/31 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
django中静态文件配置static的方法
2018/05/20 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
蛋白质世界:Protein World
2017/11/23 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
先进单位事迹材料
2014/12/25 职场文书
酒店辞职书范文
2015/02/26 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书