React项目中支持本地SVG与在线导入SVG方法

iconfont在线导入svg

如果在iconfont网站内能找到适合的svg图标，可以选在在线导入项目内，这样更加简洁，无需其他根据的辅助。

进入iconfont网站，选择 所有 需要的图标，加入购物车，并加入一个项目内，进入该项目，选择symbol，点击生成在线链接。然后点击右侧使用帮助，搜索symbol，找到使用方法。根据使用方法即可将需要的svg图片导入项目内（例如在public内的index.html的head标签内用script引入）。

本地SVG文件导入

由于本地导入的情况更常见，因此本地导入svg的方法使用更多。

可以通过配置webpack来实现SVG的引用。与之相关的加载器名称为svg-sprite-loader和svgo-loader，这里是它的官方文档。

svg加载器的安装

运行以下命令：

yarn add --dev svg-sprite-loader
yarn add --dev svgo-loader

一般typescript 和 webpack 相关的安装都需要加上 --dev

svg加载器的配置

create-react-app初始化的项目中，webpack.config.js文件被隐藏的。需要使用yarn eject命令来使它显示出来。运行命令之后会显出config文件夹。

然后在config>webpack>webpack.config.js文件内的oneOf内加上

{
  test: /.svg$/,
  use: [
    { loader: 'svg-sprite-loader', options: {} },
    { loader: 'svgo-loader', options: {} }
  ]
},

→参考文档

如果出现版本问题，可将svg-sprite-loader版本设置为5.1.1，将svgo-loader版本设置为2.2.1。这个版本组合是经过了本次项目实践验证，可以使用的。

引入的svg图片

<svg>
  <use xlinkHref="#xxx"/>
</svg>
<Link to="/tags">标签页</Link>

xxx为svg文件名称，不需要加.svg后缀。

此时可进行更多操作，例如加上css,修改颜色等等。