了解如何在 Expo 项目中创建和使用 SVG。

---

SVG（可扩展矢量图形）是一种以灵活、清晰且高性能的方式渲染图标和其他视觉元素的好方法。在 Web 上使用 SVG 非常简单，因为我们可以复制 SVG 并将其内联放置在 HTML 文件中。这是可行的，因为浏览器了解如何解析和渲染 SVG。Expo 不了解如何在 Android 和 iOS 上解析和渲染开箱即用的 SVG，因此我们需要使用 React Native 包和 SVG 转换器来执行此操作。

¥SVGs (Scalable Vector Graphics) are a great way to present icons and other visual elements in a flexible, crisp, and performant way. Using SVGs on the web is straightforward since we can copy an SVG and place it inline in an HTML file. This works because browsers understand how to parse and present SVGs. Expo does not understand how to parse and present SVG out of the box on Android and iOS, so we'll need to use a React Native package and an SVG converter to do so.

让我们回顾一下创建 SVG 并将其渲染在 Expo 项目中的整个过程。

¥Let's go over the whole process of creating an SVG to presenting it in an Expo project.

导出 SVG

¥Exporting an SVG

一旦我们在设计程序（如 Figma、Illustrator 或 Sketch）中创建了矢量，找到 "export" 菜单并指定 "SVG" 作为导出类型。这将创建一个我们可以在代码编辑器中查看的 SVG 文件。或者，这些程序通常允许右键单击某个元素，然后将其复制为 SVG。

¥Once we have a vector created inside a design program, like Figma, Illustrator, or Sketch, find the "export" menu and specify "SVG" as the export type. This will create an SVG file we can view in a code editor. Alternatively, these programs often allow right-clicking on an element, then copying it as an SVG.

使用 Babel 转换器转换 SVG 文件

¥Converting SVG files using a Babel transformer

React Native SVG 转换器 允许编译时转换以使 SVG 文件与 React 兼容。

¥React Native SVG transformer allows compile-time transformation to make SVG files compatible with React.

按照安装步骤配置你的 Expo 项目以使用此工作流程。正确配置项目后，你将能够使用本地 SVG 文件，如下所示：

¥Follow the installation steps to configure your Expo project to use this workflow. After your project is properly configured, you'll be able to use your local SVG files like this:

import Logo from './assets/logo.svg';

<Logo width={120} height={40} />;

为 React Native 转换单个 SVG 文件

¥Converting individual SVG files for React Native

或者，React-SVGR 是转换单个 SVG 文件的绝佳工具。它接受 SVG 作为输入，然后可以将其转换为另一种格式，包括与 React 一起使用的格式。

¥Alternatively, React-SVGR is a great tool to convert individual SVG files. It takes an SVG as input then can transform it into another format, including a format that works with React.

将导出的 SVG 文件中的 SVG 内容粘贴到 React-SVGR 中，并确保选中 "native" 复选框。它将提供我们可以复制并粘贴到我们的项目中的输出。

¥Paste the SVG contents from the exported SVG file into React-SVGR and make sure the "native" checkbox is ticked. It will provide output that we can copy and paste into our project.

为了自动化这个过程，React-SVGR 还允许我们将常规 SVG 放入项目中，然后运行一个脚本将它们自动转换为 React 组件。如果你有很多图标，或者有一个开发团队正在处理你的项目，那么绝对值得花时间来设置这样的流程。

¥To automate this process, React-SVGR also provides a CLI that could allow us to put regular SVGs in our project, then run a script that would convert them into React components automatically. If you have many icons, or a team of developers working on your project, it's definitely worth the time to set up process like this.

在我们的项目中包含 SVG

¥Including the SVG in our project

一旦我们有了兼容的 SVG，我们就需要将 react-native-svg 添加到我们的项目中。我们可以这样做：

¥Once we have a compatible SVG, we'll need to add react-native-svg to our project. We can do so with:

然后我们可以将如下代码添加到我们的项目中：

¥Then we can add code like the following to our project:

你可以通过我们的 SVG 上的 API 参考文档 了解有关 SVG 的更多信息。

¥You can learn more about SVG with our API Reference document on SVG.