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

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

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

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

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

SVG在一般网页中的使用

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

效果如下：

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

在 vue中使用 Svg

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

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

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

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

xmlns="http://w3.org/2000/svg"

xmlnsXlink="http://w3.org/1999/xlink"

style={{position:'absolute',width:0,height:0}}>

xmlns="http://w3.org/2000/svg"

xmlnsXlink="http://w3.org/1999/xlink"

style={{position:'absolute',width:0,height:0}}>

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

使用示例如下：

// index.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如下：

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

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

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

在 React中使用 Svg

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

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

render() {

return (

xmlns="http://w3.org/2000/svg"

xmlnsXlink="http://w3.org/1999/xlink"

style={{position:'absolute',width:0,height:0}}>

xmlns="http://w3.org/2000/svg"

xmlnsXlink="http://w3.org/1999/xlink"

style={{position:'absolute',width:0,height:0}}>

)

}

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

// 引用的时候需要将 `xlink:href` 改写成 xlinkHref

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

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

import ReactSVG from 'react-svg'

ReactDOM.render(

path="atomic.svg"

callback={svg => console.log(svg)}

className="example"

/>,

document.querySelector('.Root')

)

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

path="atomic.svg"

callback={svg => console.log(svg)}

className="example"

/>,

document.querySelector('.Root')

)

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。