Skip to main content

使用SVG图形

在之前的编写组件和编写样式中，我们已经掌握了组件和样式的实现，至此编写一个应用已经没有阻碍。在一个应用中，图片也是常见的一类资源，我们都知道webpack会将图片通过url-loader等形式转换为字符串以供使用，reSKRipt在这一点上并不特殊，就不再展开做详细的说明，唯独.svg文件有所不同。

随着社区的发展，我们越来越多地使用.svg作为图形的格式。矢量图有很好的大小自适应能力，特别是在对资源大小不那么敏感B端产品中，有着比较广泛的使用。本章节就将带你了解一下如何引入一个.svg图形资源，以及reSKRipt对此的额外能力。

作为图片引入​

正常情况下，一个.svg文件可以作为图片被赋值给<img>的src属性，或者作为background-image等CSS属性使用。在这种情况下，和.png等其它图片格式一样，我们使用import引入文件并赋值给一个变量即可：

import image from './image.svg';

<img src={image} />
<div style={{backgroundImage: `url(${image})`}} />

这种形式是最简单、基础的，我们就不再详细讲解了。

作为组件引入​

有使用过create-react-app的开发者，可能会发现它能把SVG引入为React组件。在这一点上，reSKRipt也具备相同的能力，只是形态上有所不同：

import Image from './image.svg?react';

<Image fill="#007bd2" />

reSKRipt支持你在.svg文件的引入路径后加上?react查询，就会判断你需要一个React组件，即将SVG文件内容解析转换为组件的代码。

这种方式可以让你更便捷地为SVG指定一些属性，如fill、viewBox都是常见的可自定义的属性。reSKRipt内部使用了自有的实现来处理这个功能，相比于create-react-app的babel插件实现方式有着更好的编译性能。

同样，由reSKRipt自动生成的SVG组件是带有displayName的，与其它组件相同，会依据文件名、目录名等条件来尽可能地生成有实际意义的、可读的displayName。

总结​

本章节讲述了对.svg格式的处理，在此处的处理有以下特点：

  • 可以当作正常图片来引入.svg文件，即变为一个字符串。
  • 同样可以将.svg引入作为组件，.svg?react这样的路径即可。
  • reSKRipt使用了一个自定义的loader来实现对.svg的处理，具备更好的性能。
  • 将.svg转换为组件后，会有一个可读的displayName。