在 React、Vue项目中使用SVG的方法


Posted in Javascript onFebruary 09, 2018

在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标、用户的默认头像、移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再进行裁切展示。

在 React、Vue项目中使用SVG的方法

而实际上,这些简单的小图标完全没必要让美工来做,前端完全可以通过 svg使用代码把这些简单的图标画出来,并且,因为这些图标是用代码描述出来的,所以如果想要修改这些图标,例如改变图标的颜色、图标的形状、大小等,都只是改几行代码的事情,非常简单,根本无需美工返工重做。

本文不是阐述如何利用 svg 来进行画图的,不了解 svg的可以前往 这里查看, 本文主要说一下如何在网站中使用 svg。

SVG在一般网页中的使用

svg使用 XML 格式定义图像,你也可以把它看做是一般的 HTML标签,镶嵌在网页中呈现出某种效果,在网页中使用svg的基本示例如下:

<body>
  <svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" style="fill:pink;stroke-width:1;stroke:rgb(0,0,0)"/>
  </svg></body>

效果如下:

在 React、Vue项目中使用SVG的方法

可以看到,普通网页中使用 svg是很简单的,只要你能把 svg图标画出来,在网页中的呈现完全不是问题。

在 Vue中使用 Svg

你完全可以像在 普通网页中使用 svg那样在Vue中使用,不过,既然已经是选择 vue来组件化开发项目了,那么在一堆组件中,穿插一大段的 svg毕竟有点不太好看。

一种解决方法是,利用 svg的 use标签,不直接在主页面中编写绘制svg图标的代码,而是把这一大段的代码放到另外的文件中,然后使用 use引用这段绘制图标的代码即可(好像饿了么移动端就是这么干的)。

例如,将所有绘制 svg的代码放到 svg-icon.vue文件中,所有图标的绘制代码使用 symbol标签分隔开并单独命名,避免错乱,然后将这个文件当做是一个组件导出,在主页面中引入此组件,接着,在需要 使用 svg图标的地方,通过 use标签将其引入。

svg-draw.vue代码示例如下:

<template>
 <svg
  xmlns="http://www.w3.org/2000/svg"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  style={{position:'absolute',width:0,height:0}}>
  <defs>
   <symbol viewBox="0 0 26 31" id="location">
    <path xmlns="http://www.w3.org/2000/svg" d="M512.571517 65.907059c-204.736964 0-370.715183 165.979242-370.715183 370.724393 0 94.440929 35.320437 180.625824 93.462648 246.083651 1.572822 2.690272 3.50994 5.225001 5.817496 7.531534l240.297878 251.597225c1.279133 1.864464 2.736321 3.64297 4.393054 5.298679 2.111081 2.111081 4.418636 3.90596 6.856152 5.402033 14.458293 10.06524 34.491559 8.658194 47.393403-4.242627 3.26537-3.263323 5.78782-6.987135 7.582699-10.960633L783.610536 690.24766c1.867534-1.866511 3.489474-3.88447 4.876054-6.010901 58.951647-65.640999 94.819552-152.431691 94.819552-247.604284C883.305119 231.886301 717.325877 65.907059 512.571517 65.907059zM512.390391 588.611865c-82.734306 0-149.814074-67.087954-149.814074-149.842727 0-82.753749 67.079768-149.833517 149.814074-149.833517 82.772168 0 149.851936 67.079768 149.851936 149.833517C662.242328 521.523911 595.161536 588.611865 512.390391 588.611865z" fill="#d81e06"/>
   </symbol>
  </defs>
 </svg></template>

整个 vue组件导出一个大的 svg,此svg中包含了许多小的图标,类似于精灵图,每个图标使用 symbol分隔,并单独命名以方便引用。

使用示例如下:

// index.vue
...<svg class="location-icon">
 <use xlink:href="#location" rel="external nofollow" ></use></svg>...

然后,就可以看到网页中顺利出现对应的 svg图标了:

在 React、Vue项目中使用SVG的方法

不过,还有个问题,如果当前网站需要用到的 svg图标很多,势必就造成 svg-icon.vue这个文件体积逐渐变大,当前网页命名只需要用到其中一个 svg图标,结果你把几百个图标的 svg代码,全部加载了进来,明显不太友好,最好是能够按需加载,当前网页需要哪些图标就加载哪些,甚至一些可能出现可能不出现的图标,也在该出现时再加载,如果没有机会出现,那么永远不加载。

Github上有很多此类的插件,我介绍一个我觉得很好用的插件:vue-svg-icon,简单易用、快速上手。

首先,安装此插件,就不多说了,安装完成后,在项目的入口文件中注册此插件以方便全局调用:

import Icon from 'vue-svg-icon/Icon.vue'Vue.component('icon', Icon)

然后在根目录的 /src目录下新建一个 svg目录(目前这个路径只能是这样,不可配置为其他路径和目录),然后再这个目录中放入你想要使用的 svg图标的 svg文件即可。

例如一个微信图标的 svg如下:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1502683891821" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2885" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
<defs>
<style type="text/css"></style>
</defs>
<path d="M282.6 363.8c-23.7 0-47-15.7-47-38.9 0-23.7 23.3-38.9 46.5-38.9 23.7 0 38.9 15.2 38.9 38.9 0.5 23.2-15.1 38.9-38.4 38.9zM500.4 286c23.7 0 38.9 15.2 38.9 38.9 0 23.3-15.2 38.9-38.9 38.9-23.3 0-47-15.7-47-38.9 0-23.7 23.7-38.9 47-38.9z m167.7 84.5c9.8 0 19.7 0.5 30 1.8-27.3-125.6-161.4-218.7-314.4-218.7C212.4 153.6 72 270.3 72 418.3c0 85.9 46.5 155.6 124.8 210.2l-31.3 93.9 109.1-54.6c38.9 7.6 70.2 15.7 109.1 15.7 9.4 0 19.2-0.5 29.1-1.3-6.3-20.6-9.8-42.9-9.8-65.3-0.1-136 116.6-246.4 265.1-246.4z" p-id="2886"></path><path d="M772.7 573.9c-15.2 0-30.9-15.2-30.9-30.9 0.5-15.7 15.7-31.3 30.9-31.3 23.7 0 39.4 15.7 39.4 31.3-0.1 15.7-15.7 30.9-39.4 30.9z m-171.3 0c-15.2 0-30.9-15.2-30.9-30.9s15.7-31.3 30.9-31.3c23.7 0 38.9 15.7 38.9 31.3 0.5 15.7-15.2 30.9-38.9 30.9zM952 613.3C952 488.5 827.2 387 687.3 387c-148 0-264.7 101.5-264.7 226.3 0 124.8 116.7 225.8 264.7 225.8 31.3 0 62.6-8.1 93.5-15.7l85.9 47-23.7-77.8c62.5-47 109-109.1 109-179.3z" p-id="2887">
</path>
</svg>

将上述代码保存到一个 .svg的文件中,例如 wx.svg,放到 /src/svg目录中,这样就完成了准备工作。

接着,想要使用的话,很简单,直接在 vue组件中这么写:

<template>
  <icon class="wx-icon" name="wx"></icon></template>

在 React、Vue项目中使用SVG的方法

刷新页面时,打开控制台,可以看到页面中加载了这个 wx.svg文件,这样,就实现了 svg文件的按需引入。

在 React中使用 Svg

在 React中使用Svg和 vue一样,同样存在 3种方案,一种是直接在 react的 reader方法中写入 svg代码,第二种则是将所有 svg绘制代码放到一个文件中,然后将这个文件一次性载入,使用 use标签引用响应的 svg图案,第三种则是使用插件按需引入。

第一种直接在 渲染方法中写入 svg的方法就不多说了,第二种也很简单 ,和 vue一样,只不过写法上需要注意一下。

render() {
  return (
   <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    style={{position:'absolute',width:0,height:0}}>
    <defs>
     <symbol viewBox="0 0 26 31" id="location">
      <path fill="#FFF" fillRule="evenodd" d="M22.116 22.601c-2.329 2.804-7.669 7.827-7.669 7.827-.799.762-2.094.763-2.897-.008 0 0-5.26-4.97-7.643-7.796C1.524 19.8 0 16.89 0 13.194 0 5.908 5.82 0 13 0s13 5.907 13 13.195c0 3.682-1.554 6.602-3.884 9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z"></path>
     </symbol>
     <symbol viewBox="0 0 14 8" id="arrow">
      <path fill="#FFF" fillRule="evenodd" d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z"></path>
     </symbol>
    </svg>
   )
}

主要是需要注意,因为 react使用 jsx语法,不允许出现 - 连字符,所以像 fill-rule这样的属性,就必须写成 fillRule,引用的时候同样如此。

// 引用的时候需要将 `xlink:href` 改写成 xlinkHref<svg className="arrow-left">
  <use xlinkhref="#arrow-left" rel="external nofollow" ></use>
 </svg>

第三种按需引入,只加载当前需要的 svg形状,同样是将每一个 svg图片作为一个单独的文件保存,然后再需要使用的地方进行引用。 Github上有个项目 react-svg,这个项目内部其实是对 SVGInjector的包装,

安装 react-svg之后,就可以像下面这样使用了:

import ReactSVG from 'react-svg'

ReactDOM.render(
 <ReactSVG
  path="atomic.svg"
  callback={svg => console.log(svg)}
  className="example"
 />,
 document.querySelector('.Root')
)

一般都只是在使用小图标的时候才考虑 svg,而这些小图标一般都比较简约,绘制起来也没什么难度,不过大部分情况下没有必要自己来画,很多网站都提供svg的图标下载,例如阿里的 iconfont,图标数量众多,基本可以满足绝大部分的需求,另外,类似的网站还有 easyicon 、 icomoon等。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
Vue3.0的优化总结
Oct 16 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 #Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 #Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 #Javascript
vue二级路由设置方法
Feb 09 #Javascript
从零开始搭建一个react项目开发
Feb 09 #Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 #Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 #Javascript
You might like
php从文件夹随机读取文件的方法
2015/06/01 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
PDO::setAttribute讲解
2019/01/29 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
基于jQuery的动态表格插件
2011/03/28 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
jQuery替换textarea中换行的方法
2015/06/10 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
python装饰器与递归算法详解
2016/02/18 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python 命名规范知识点汇总
2020/02/14 Python
Python itertools.product方法代码实例
2020/03/27 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
白莲教口号
2014/06/18 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL