</path>
</svg>
将上述代码保存到一个 .svg的文件中，例如 wx.svg，放到 /src/svg目录中，这样就完成了准备工作。
接着，想要使用的话，很简单，直接在 vue组件中这么写：
<template>
<icon class="wx-icon" name="wx"></icon></template>
刷新页面时，打开控制台，可以看到页面中加载了这个 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'
