react中如何优雅的使用svg？

一般页面中如何使用svg

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。

• 下面是 SVG 代码直接插入网页的例子。

<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="100quot; height="100quot; style="fill:blue;stroke-width:2;stroke:rgb(0,0,0)"/>
</svg>

效果如下：

可以看到svg的简单实用，和展示效果。那么react中如何使用svg呢。重复使用的svg是否可以作为模块引入呢。答案下面揭晓。

react中如何使用svg

其实也可以像上面那样去使用svg，但是问题来啦。重复的svg要代码拷贝粘贴？后期维护和修改就有无尽的麻烦。于是就想到了组件化。如何组件话呢。svg结合use标签就登上了舞台。不直接在主页面中编写绘制svg图标的代码，而是把这一大段的代码放到另外的文件中，然后使用 use引用这段绘制图标的代码即可（好像github就是这样做的）。

先啰嗦一下，实现的原理吧。 看代码

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__">
<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 class="icon" viewBox="0 0 1024 1024" id="bank">
<defs><style type="text/css"></style></defs>
<rect width="100quot; height="100quot; style="fill:rgb(153, 238, 172);
stroke-width:2;stroke:rgb(0,0,0)">
</rect>    
</symbol>
</svg>

如何使用

<svg><use xlink:href="#bank"></use></svg>

symbol中的id和use中的href要对应才行

这样就能显示上面的svg

所以总结一下：

1. react 项目中单独存放svg文件

2. 可以提前加载,也可以按需加载

3. 使用的使用和上面一样

虽然说可以使用但是如果直接引用可能报错，可能不现实。可能原因：

1. webpack配置文件出题图片或者字体的loader中含有svg的处理。

2. svg使用姿势不正确 处理方法：我认为svg-sprite-loader比较好用，当然处理svg的loader还有react-svg，react-svg-loader。如需了解google一下就知道

webpack.config.js

{
      test: /\.(eot|woff2?|ttf|svg)$/,
      exclude: path.resolve(__dirname, '../src/static/icons'), //不处理指定svg的文件
      use: [
        {
          loader: "url-loader",
          options: {
          name: "[name]-[hash:5].min.[ext]",
          limit: 5000, //fonts file size <= 5KB,use 'base64';else,output svg file
          outputPath: "font",
          publicPath:'font'
          }
        }
      ]
}
{
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      include: path.resolve(__dirname, '../src/static/icons'), // //只处理指定svg的文件
      // options: {
      //   symbolId: '[name]'
      // }
}

前方高能

上面配置以后，直接可以在组件中

import '../../static/icons/bank'; //引入对应的bank.svg文件
...
//下面使用
 <svg><use xlink:href="#bank"></use></svg>

如果icon很多每次都需要import ,对于一个懒人来说有点烦躁，不过下面的方式可以帮你一次全部引入 在对应的icons文件下建index.js

let require = requireContext => requireContext.keys().map(requireContext)
let svgs = require.context('./', false, /\.svg$/)
require(svgs)

直接引入index.js之后所有组件都能开心的使用所有svg。当然默认id是文件名。

更多web前端开发知识，请查阅 HTML中文网 ！！

以上就是react中如何优雅的使用svg？的详细内容，更多请关注易知道|edz.cc其它相关文章！