在 React Native 开发中，SVG 可以用来绘制矢量图形。而 react-native-svg-cli 是一个能够方便地将 SVG 转换成 React Native 组件的命令行工具，可以极大地提高 SVG 的可重用性和开发效率。在本文中，我们将介绍如何使用这个 npm 包。
安装
npm install -g react-native-svg-cli
使用
生成 React Native SVG 组件
在命令行中，进入要转换的 SVG 文件所在的目录，执行如下命令。
rsvg --output-dir=generated svgs/
其中：
rsvg表示使用 react-native-svg-cli 工具；--output-dir=generated表示生成的文件将被保存在 generated 目录下；svgs/表示要转换的 SVG 文件所在的目录，可以替换为自己的目录名。
执行完毕后，生成的文件中将包含一个以 SVG 文件名为基础的组件，你可以将其直接导入到你的 React Native 项目中，以支持 SVG 图片的使用。
使用示例
在 React Native 项目的代码中，按照如下方式导入 SVG 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ ----- ---- --------------------
----- --- - -- -- -
------ -
------
------ ----------- ------------ --
-------
--
--
------ ------- ----其中：
MySvg是生成的 SVG 组件的名称，这里直接导入；width和height分别是 SVG 组件的宽度和高度，这里直接使用了 React Native 的相关属性。
配置
如果你需要使用 react-native-svg-cli 中的更多选项，可以在 rsvg.config.js 文件中进行配置，该文件应该位于 React Native 项目根目录下。这里有一些常用的配置选项：
module.exports = {
svgDir: 'svgs', // 要转换的 SVG 文件所在的目录
outputDir: 'generated', // 生成的组件所保存的目录
projectRoot: '.', // 项目根目录，默认为 .
svgoConfig: {}, // SVGO 配置
titleProp: false, // 是否为 SVG 组件添加 title 属性
};总结
借助 react-native-svg-cli，我们可以将现有的 SVG 图像重新用在 React Native 应用中，提高组件的可重用性和开发效率。同时，该工具还支持一些额外的配置选项，可以让我们更灵活地调整转换结果。希望本文能够对你使用 react-native-svg-cli 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671481e8991b448e3655