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

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

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

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

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

SVG在一般网页中的使用

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

<body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect/> </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"> <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> <use xlink:href="#location" ></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)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ppwjp.html