本篇文章主要介绍了在 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代码示例如下：
整个 vue组件导出一个大的 svg，此svg中包含了许多小的图标，类似于精灵图，每个图标使用 symbol分隔，并单独命名以方便引用。
使用示例如下：
// index.vue ......
然后，就可以看到网页中顺利出现对应的 svg图标了：
不过，还有个问题，如果当前网站需要用到的 svg图标很多，势必就造成 svg-icon.vue这个文件体积逐渐变大，当前网页命名只需要用到其中一个 svg图标，结果你把几百个图标的 svg代码，全部加载了进来，明显不太友好，最好是能够按需加载，当前网页需要哪些图标就加载哪些，甚至一些可能出现可能不出现的图标，也在该出现时再加载，如果没有机会出现，那么永远不加载。
Github上有很多此类的插件，我介绍一个我觉得很好用的插件：vue-svg-icon，简单易用、快速上手。
首先，安装此插件，就不多说了，安装完成后，在项目的入口文件中注册此插件以方便全局调用：
Shopxp购物系统历经多年的考验，并在推出shopxp免费购物系统下载之后，收到用户反馈的各种安全、漏洞、BUG、使用问题进行多次修补，已经从成熟迈向经典，再好的系统也会有问题，在完善的系统也从在安全漏洞，该系统完全开源可编辑，当您下载这套商城系统之后，可以结合自身的技术情况，进行开发完善，当然您如果有更好的建议可从官方网站提交给我们。Shopxp网上购物系统完整可用，无任何收费项目。该系统经过
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 (
)
}主要是需要注意，因为 react使用 jsx语法，不允许出现 - 连字符，所以像 fill-rule这样的属性，就必须写成 fillRule，引用的时候同样如此。
// 引用的时候需要将 `xlink:href` 改写成 xlinkHref
第三种按需引入，只加载当前需要的 svg形状，同样是将每一个 svg图片作为一个单独的文件保存，然后再需要使用的地方进行引用。 Github上有个项目 react-svg，这个项目内部其实是对 SVGInjector的包装，
安装 react-svg之后，就可以像下面这样使用了：
import ReactSVG from 'react-svg' ReactDOM.render(console.log(svg)} className="example" />, document.querySelector('.Root') )
一般都只是在使用小图标的时候才考虑 svg，而这些小图标一般都比较简约，绘制起来也没什么难度，不过大部分情况下没有必要自己来画，很多网站都提供svg的图标下载，例如阿里的 iconfont，图标数量众多，基本可以满足绝大部分的需求，另外，类似的网站还有 easyicon 、 icomoon等。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
