将 SVG 转换为 React Native 组件

Posted 2023-03-28

【中文标题】将 SVG 转换为 React Native 组件

【英文标题】：Transform SVG to React Native Component

【发布时间】：2019-10-01 16:09:21

【问题描述】：

我正在尝试使用 Expo SVG library（即 react-native-svg）将此特定 SVG 转换为 React-Native。

不知何故，我成功翻译了我的一些 SVG，但这个没有。

SVG File Family

我所有的背景都是黑色的。它使用了Mask 和Use 元素，我真的不习惯。

感谢您的宝贵时间

【参考方案1】：

在这里，我为您修复了<svg/> 代码，去除了掩码等，并优化了路径。

<?xml version="1.0" encoding="utf-8"?>
<svg   viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M 14.3 3.6 C 15.2 3.6 15.9 4.3 15.9 5.2 C 15.9 6.1 15.2 6.8 14.3 6.8 C 13.4 6.8 12.7 6.1 12.7 5.2 C 12.7 4.3 13.4 3.6 14.3 3.6 Z M 14.3 7.5 C 15.5 7.5 16.5 6.5 16.5 5.2 C 16.5 4.5 16.2 3.9 15.7 3.5 L 15.7 3.3 C 15.8 3.2 15.8 3 15.6 2.9 C 15.5 2.8 15.3 2.9 15.2 3 L 15.1 3.1 C 14.9 3.1 14.8 3 14.6 3 L 14.6 2.9 C 14.6 2.7 14.5 2.5 14.3 2.5 C 14.1 2.5 14 2.7 14 2.9 L 14 3 C 13.8 3 13.6 3.1 13.4 3.1 L 13.4 3 C 13.3 2.9 13.1 2.8 12.9 2.9 C 12.8 3 12.7 3.2 12.8 3.3 L 12.9 3.5 C 12.4 3.9 12 4.5 12 5.2 C 12 6.5 13 7.5 14.3 7.5 L 14.3 7.5 Z M 18.2 4.1 C 18.9 4.9 19.9 5.4 21 5.5 C 20.8 6.3 20.2 6.8 19.4 6.8 C 18.5 6.8 17.8 6.1 17.8 5.2 C 17.8 4.8 18 4.4 18.2 4.1 Z M 18.1 3.4 C 18.1 3.4 18 3.4 18 3.4 C 17.5 3.9 17.2 4.5 17.2 5.2 C 17.2 6.5 18.2 7.5 19.4 7.5 C 20.6 7.5 21.7 6.5 21.7 5.2 C 21.7 4.5 21.3 3.8 20.7 3.4 C 21 3.2 21.2 2.9 21.2 2.5 C 21.2 2 20.8 1.6 20.3 1.5 C 20.1 1.2 19.8 1 19.4 1 C 19.1 1 18.7 1.2 18.5 1.5 C 18 1.6 17.7 2 17.7 2.5 C 17.7 2.9 17.8 3.2 18.1 3.4 C 18.1 3.4 18.1 3.4 18.1 3.4 C 18.1 3.4 18.1 3.4 18.1 3.4 L 18.1 3.4 Z M 17.7 16.5 L 17.7 15.7 C 17.8 15.8 18 15.8 18.1 15.8 C 18.4 15.8 18.7 15.7 18.9 15.6 C 19.1 15.7 19.3 15.8 19.6 15.8 C 19.9 15.8 20.2 15.7 20.4 15.6 C 20.6 15.7 20.8 15.8 21.1 15.8 C 21.3 15.8 21.4 15.8 21.5 15.7 L 21.5 16.5 L 17.7 16.5 Z M 17.7 22 L 16.7 22.3 L 15.8 22 L 15.8 15.1 C 16.2 14.7 16.4 14.2 16.4 13.6 L 16.4 9.6 L 17.1 9.6 L 17.1 16.8 C 17.1 16.9 17.2 17.1 17.4 17.1 L 17.7 17.1 L 17.7 22 Z M 12.6 10.3 C 12.9 10.8 13.5 11.1 14.1 11.3 C 14.1 11.3 14.1 11.3 14.2 11.3 C 14.2 11.3 14.2 11.3 14.2 11.3 C 14.9 11.1 15.4 10.8 15.8 10.3 L 15.8 13.2 L 12.6 13.2 L 12.6 10.3 Z M 12.6 22 L 11.6 22.3 L 10.6 22 L 10.6 17.1 L 11 17.1 C 11.1 17.1 11.3 16.9 11.3 16.8 L 11.3 9.6 L 11.9 9.6 L 11.9 13.6 C 11.9 14.2 12.2 14.7 12.6 15.1 L 12.6 22 Z M 7.4 16.5 L 10.6 16.5 L 10.6 15.8 L 7.4 15.8 L 7.4 16.5 Z M 7.4 22 L 6.5 22.3 L 5.5 22 L 5.5 15.1 C 5.9 14.7 6.1 14.2 6.1 13.6 L 6.1 9.6 L 6.8 9.6 L 6.8 16.8 C 6.8 16.9 6.9 17.1 7.1 17.1 L 7.4 17.1 L 7.4 22 Z M 3.9 15.2 C 3.1 15.2 2.5 14.6 2.3 13.9 L 5.5 13.9 C 5.3 14.6 4.7 15.2 3.9 15.2 Z M 2.3 6.5 L 2.3 6 L 3.1 6 C 3.2 6 3.3 5.9 3.4 5.8 C 3.5 5.6 3.7 5.5 3.9 5.5 C 4.1 5.5 4.3 5.6 4.4 5.8 C 4.5 5.9 4.6 6 4.7 6 L 5.5 6 L 5.5 6.5 C 5.5 7.4 4.8 8.1 3.9 8.1 C 3 8.1 2.3 7.4 2.3 6.5 Z M 2.3 5.2 C 2.3 4.3 3 3.6 3.9 3.6 C 4.8 3.6 5.5 4.3 5.5 5.2 L 5.5 5.3 L 4.8 5.3 C 4.6 5.1 4.3 4.9 3.9 4.9 C 3.5 4.9 3.2 5.1 2.9 5.3 L 2.3 5.3 L 2.3 5.2 Z M 7.4 11.9 C 8 11.8 8.5 11.3 8.7 10.7 L 9.4 10.7 C 9.5 11.3 10 11.8 10.6 11.9 L 10.6 15.2 L 7.4 15.2 L 7.4 11.9 L 7.4 11.9 Z M 7.4 9.3 C 7.4 9 7.7 8.7 8 8.7 L 8.1 8.7 L 8.1 10.4 C 8.1 10.8 7.8 11.1 7.4 11.3 L 7.4 9.3 Z M 8.7 10 L 9.3 10 L 9.3 8.7 L 8.7 8.7 L 8.7 10 Z M 10 8.7 L 10.1 8.7 C 10.4 8.7 10.6 9 10.6 9.3 L 10.6 11.3 C 10.3 11.1 10 10.8 10 10.4 L 10 8.7 Z M 17.7 12.6 L 21.1 12.6 C 21.4 13 21.5 13.5 21.5 14 L 21.5 15 C 21.4 15.1 21.3 15.2 21.1 15.2 C 20.9 15.2 20.7 15.1 20.6 14.9 C 20.6 14.8 20.5 14.8 20.4 14.8 C 20.3 14.8 20.2 14.8 20.1 14.9 C 20 15.1 19.8 15.2 19.6 15.2 C 19.4 15.2 19.2 15.1 19.1 14.9 C 19.1 14.8 19 14.8 18.9 14.8 C 18.8 14.8 18.7 14.8 18.6 14.9 C 18.5 15.1 18.3 15.2 18.1 15.2 C 18 15.2 17.8 15.1 17.7 15 L 17.7 12.6 Z M 17.7 9.3 C 17.7 9 17.9 8.7 18.2 8.7 L 20.4 8.7 C 20.7 8.7 20.9 9 20.9 9.3 L 20.9 12 L 17.7 12 L 17.7 9.3 Z M 22 22.3 L 20.9 22 L 20.9 17.1 L 21.9 17.1 C 22 17.1 22.2 16.9 22.2 16.8 L 22.2 14 C 22.2 13.3 22 12.7 21.5 12.2 L 21.5 9.3 C 21.5 8.6 21 8.1 20.4 8.1 L 18.2 8.1 C 17.7 8.1 17.2 8.5 17.1 9 L 16.4 9 L 16.4 8.4 C 16.4 8.4 16.4 8.4 16.4 8.4 C 16.4 8.4 16.4 8.4 16.4 8.4 C 16.4 8.4 16.4 8.4 16.4 8.4 C 16.4 8.4 16.4 8.3 16.4 8.3 C 16.4 8.3 16.4 8.3 16.4 8.3 C 16.4 8.3 16.4 8.3 16.4 8.3 C 16.4 8.3 16.4 8.3 16.4 8.3 C 16.4 8.3 16.4 8.3 16.4 8.3 C 16.4 8.3 16.4 8.3 16.4 8.3 C 16.4 8.3 16.4 8.3 16.4 8.3 C 16.4 8.3 16.4 8.2 16.4 8.2 C 16.4 8.2 16.3 8.2 16.3 8.2 C 16.3 8.2 16.3 8.2 16.3 8.2 C 16.3 8.2 16.3 8.2 16.3 8.2 C 16.3 8.2 16.3 8.2 16.3 8.2 C 16.3 8.2 16.3 8.2 16.3 8.2 C 16.3 8.2 16.3 8.2 16.3 8.2 C 16.3 8.2 16.2 8.1 16.2 8.1 C 16.2 8.1 16.2 8.1 16.2 8.1 C 16.2 8.1 16.2 8.1 16.2 8.1 C 16.2 8.1 16.2 8.1 16.2 8.1 C 16.2 8.1 16.2 8.1 16.2 8.1 C 16.2 8.1 16.2 8.1 16.2 8.1 C 16.2 8.1 16.2 8.1 16.2 8.1 C 16.1 8.1 16.1 8.1 16.1 8.1 C 16.1 8.1 16.1 8.1 16.1 8.1 C 16.1 8.1 16.1 8.1 16.1 8.1 L 12.2 8.1 C 12.1 8.1 11.9 8.2 11.9 8.4 L 11.9 9 L 11.2 9 C 11.1 8.5 10.6 8.1 10.1 8.1 L 8 8.1 C 7.4 8.1 7 8.5 6.8 9 L 6.1 9 C 6 8.6 5.7 8.3 5.4 8.2 C 5.8 7.8 6.1 7.2 6.1 6.5 L 6.1 5.2 C 6.1 4 5.1 3 3.9 3 C 2.7 3 1.6 4 1.6 5.2 L 1.6 6.5 C 1.6 7.2 1.9 7.8 2.4 8.2 C 2 8.4 1.6 8.8 1.6 9.3 L 1.6 13.6 C 1.6 14.2 1.9 14.7 2.3 15.1 L 2.3 22 L 1.2 22.3 C 1.1 22.4 1 22.6 1 22.7 C 1.1 22.9 1.2 23 1.3 23 C 1.4 23 1.4 23 1.4 22.9 L 2.7 22.5 C 2.8 22.5 2.9 22.3 2.9 22.2 L 2.9 15.6 C 3.2 15.7 3.5 15.8 3.9 15.8 C 4.2 15.8 4.6 15.7 4.9 15.6 L 4.9 22.2 C 4.9 22.3 4.9 22.5 5.1 22.5 L 6.4 22.9 C 6.4 23 6.4 23 6.5 23 C 6.5 23 6.5 23 6.6 22.9 L 7.8 22.5 C 8 22.5 8.1 22.3 8.1 22.2 L 8.1 17.1 L 10 17.1 L 10 22.2 C 10 22.3 10.1 22.5 10.2 22.5 L 11.5 22.9 C 11.5 23 11.6 23 11.6 23 C 11.6 23 11.7 23 11.7 22.9 L 13 22.5 C 13.1 22.5 13.2 22.3 13.2 22.2 L 13.2 15.6 C 13.5 15.7 13.8 15.8 14.2 15.8 C 14.5 15.8 14.8 15.7 15.1 15.6 L 15.1 22.2 C 15.1 22.3 15.2 22.5 15.3 22.5 L 16.6 22.9 C 16.7 23 16.7 23 16.7 23 C 16.8 23 16.8 23 16.8 22.9 L 18.1 22.5 C 18.2 22.5 18.3 22.3 18.3 22.2 L 18.3 17.1 L 20.3 17.1 L 20.3 22.2 C 20.3 22.3 20.3 22.5 20.5 22.5 L 21.8 22.9 C 21.8 23 21.8 23 21.9 23 C 22 23 22.1 22.9 22.2 22.7 C 22.2 22.6 22.1 22.4 22 22.3 L 22 22.3 Z M 7.6 4.4 C 8 4.7 8.5 4.9 9 4.9 C 9.5 4.9 10 4.7 10.4 4.4 C 10.6 4.7 10.6 4.9 10.6 5.2 C 10.6 6.1 9.9 6.8 9 6.8 C 8.1 6.8 7.4 6.1 7.4 5.2 C 7.4 4.9 7.5 4.7 7.6 4.4 Z M 9 7.5 C 10.3 7.5 11.3 6.5 11.3 5.2 C 11.3 4.3 10.7 3.5 10 3.2 C 10.2 3 10.3 2.7 10.3 2.3 C 10.3 1.6 9.7 1 9 1 C 8.3 1 7.7 1.6 7.7 2.3 C 7.7 2.7 7.9 3 8.1 3.2 C 7.3 3.5 6.8 4.3 6.8 5.2 C 6.8 6.5 7.8 7.5 9 7.5 L 9 7.5 Z" id="Fill-1" fill="#0A090B" stroke="none" stroke- fill-rule="evenodd"/>
  <path d="M 2.3 9.3 C 2.3 9 2.5 8.7 2.8 8.7 L 3.6 8.7 L 3.6 11.6 C 3.6 11.8 3.7 12 3.9 12 C 4.1 12 4.2 11.8 4.2 11.6 L 4.2 8.7 L 5 8.7 C 5.3 8.7 5.5 9 5.5 9.3 L 5.5 13.2 L 4.2 13.2 L 4.2 12.9 C 4.2 12.7 4.1 12.6 3.9 12.6 C 3.7 12.6 3.6 12.7 3.6 12.9 L 3.6 13.2 L 2.3 13.2 L 2.3 9.3 Z M 9 3.6 C 9.4 3.6 9.7 3.7 10 4 C 9.7 4.1 9.4 4.3 9 4.3 C 8.7 4.3 8.3 4.1 8 4 C 8.3 3.7 8.7 3.6 9 3.6 Z M 9 1.7 C 9.4 1.7 9.7 2 9.7 2.3 C 9.7 2.7 9.4 3 9 3 C 8.7 3 8.4 2.7 8.4 2.3 C 8.4 2 8.7 1.7 9 1.7 Z M 18.7 2.1 C 18.9 2.1 19 2 19 1.9 C 19.1 1.8 19.2 1.7 19.4 1.7 C 19.6 1.7 19.7 1.8 19.8 1.9 C 19.8 2 20 2.1 20.1 2.1 C 20.3 2.1 20.5 2.3 20.5 2.5 C 20.5 2.8 20.3 3 20.1 3 L 18.7 3 C 18.5 3 18.3 2.8 18.3 2.5 C 18.3 2.3 18.5 2.1 18.7 2.1 Z M 21 4.9 C 20.1 4.8 19.3 4.4 18.7 3.8 C 18.9 3.7 19.2 3.6 19.4 3.6 C 20.2 3.6 20.8 4.2 21 4.9 Z M 15.7 8.7 C 15.6 9.6 15 10.4 14.2 10.7 C 13.3 10.4 12.7 9.6 12.6 8.7 L 15.7 8.7 Z M 14.2 15.2 C 13.4 15.2 12.7 14.6 12.6 13.9 L 15.7 13.9 C 15.6 14.6 14.9 15.2 14.2 15.2 Z" id="Path" fill="#174C87" stroke="none" stroke- fill-rule="evenodd"/>
</svg>

为此，我使用 Boxy SVG，但大多数 svg 编辑器都可以做到这一点。我要做的第一件事是取消组合所有内容以删除所有额外的<g/> 标签，然后取消屏蔽任何被屏蔽的内容，并合并所有具有相同填充的路径。这些东西有点超出了代码编辑的范围——它需要一个可视化编辑器。

【讨论】：

你能解释一下你是如何清理这个 svg 的吗？你有什么工具吗？这对我将来很有帮助

@LouisLecocq 当然，我在回答中添加了简短描述。

非常感谢！如果我发现自己又被这个卡住了，我会试试的：+1：祝你有美好的一天