在 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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
详解Chai.js断言库API中文文档
Jan 31 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
php实现微信支付之退款功能
2018/05/30 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
浅谈js闭包理解
2019/03/28 Javascript
vue实现评论列表功能
2019/10/25 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
jquery实现轮播图特效
2020/04/12 jQuery
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
进一步理解Python中的函数编程
2015/04/13 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Python3常见函数range()用法详解
2019/12/30 Python
python实现猜数游戏
2020/03/27 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
2014年英语工作总结
2014/12/20 职场文书
文体活动总结
2015/02/04 职场文书