在设计和开发工作中，能高效管理 SVG 资源并与 Figma 无缝协作，那可太方便了。今天就来详细说说 SVGL.app CLI 的终端管理，以及它和 Figma 插件的集成方法，让你一键就能下载 SVG 代码。
先说说 SVGL.app CLI 的安装和基本使用。要安装 SVGL.app CLI，得先在终端里运行
pnpm install -g @svgl/cli 命令。安装好之后，你可以用 svgl --help 查看所有可用命令。比如，想初始化一个新项目，就用 svgl init 命令，它会帮你生成项目所需的文件和目录结构。在终端里管理 SVG 库也很简单。要是你有新的 SVG 文件要添加到库中，只需把文件复制到
static/library/ 目录下，然后用文本编辑器打开 src/data/svgs.ts 文件，按照里面的格式添加图标的元数据。添加好之后，运行 svgl dev 命令，就能启动本地服务，在浏览器里查看和测试你的 SVG 库了。再看看怎么把 SVGL.app CLI 和 Figma 插件集成起来。这里要用到
figma-icons-cli 工具，它能同时拉取 Figma 和 iconfont 的图标，还能生成组件。你得先在项目里安装这个工具，运行 npm install -D figma-icons-cli 就行。安装好之后，在项目根目录生成一个 icons.config.ts 配置文件，按照模板填写相关参数，比如 Figma 文件的 ID、要拉取的图标名称等。配置好
icons.config.ts 文件后，就可以用 figma-icons-cli 拉取图标了。运行 npx figma-icons-cli pull 命令，它会自动从 Figma 和 iconfont 拉取指定的图标，并生成相应的组件。生成的组件会放在 src/components/icons/ 目录下，你可以直接在项目里使用这些组件。为了能一键下载 SVG 代码，我们可以写个自动化脚本。这个脚本要先调用 SVGL.app CLI 从库中获取 SVG 代码，然后通过 Figma 插件把代码导入到 Figma 文件中。你可以用 Node.js 来写这个脚本，先安装
axios 和 figma-js 库，然后用 axios 调用 SVGL.app 的 API 获取 SVG 代码，再用 figma-js 库把代码导入到 Figma 文件中。在脚本里，你得先获取 SVGL.app 的 API 密钥，然后用它来调用 API。比如，用
axios.get('https://svgl.app/api/logo/svelte', { headers: { 'Authorization': Bearer ${API_KEY} } }) 获取 Svelte 的 SVG 代码。获取到代码后，用 figma.createNodeFromSvg 方法把代码导入到 Figma 文件中。在集成过程中，可能会遇到一些问题。要是拉取图标时出错了，你可以检查一下
icons.config.ts 文件里的配置参数是否正确，或者看看 Figma 文件的 ID 是否有效。要是下载 SVG 代码时遇到问题，你可以检查一下 API 密钥是否正确，或者看看网络连接是否正常。总之，通过 SVGL.app CLI 的终端管理和 Figma 插件的集成，你能更高效地管理和使用 SVG 资源，一键下载 SVG 代码，大大提升工作效率。如果你在使用过程中遇到问题，别忘了查阅官方文档或者在社区里寻求帮助。
该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具。
