ClawSkills logoClawSkills

SF Symbol generator

从 SVG 生成 Xcode SF Symbol 资源目录 .symbolset。当需要通过创建 symbolset 文件夹来添加自定义 SF Symbol(构建时)时使用,Con

介绍

# SF Symbol Generator

## 用法

您可以使用 `SFSYMBOL_ASSETS_DIR` 覆盖默认的资源目录位置。

### 原始 symbolset(无模板注入)

```bash ./scripts/generate.sh <symbol-name> <svg-path> [assets-dir] ```

- `symbol-name`:完整的符号名称(例如 `custom.logo`、`brand.icon.fill`)。 - `svg-path`:源 SVG 文件的路径。 - `assets-dir`(可选):指向 `Assets.xcassets/Symbols` 的路径(默认为 `Assets.xcassets/Symbols` 或 `SFSYMBOL_ASSETS_DIR`)。

### 基于模板的 symbolset(推荐)

```bash ./scripts/generate-from-template.js <symbol-name> <svg-path> [template-svg] [assets-dir] ```

- `template-svg`(可选):用于注入路径的 SF Symbols 模板 SVG(默认为在 `Assets.xcassets/Symbols` 中找到的第一个 `.symbolset` SVG,否则使用内置的 skill 模板)。

## 示例

```bash ./scripts/generate-from-template.js pi.logo /Users/admin/Desktop/pi-logo.svg ```

## 要求

- SVG 必须包含 `viewBox`。 - 使用**基于路径**的形状(必须使用路径;支持矩形并会自动转换,但其他形状应转换为路径)。 - 优先使用**填充**形状(无描边)以避免细线条伪影。

## 工作流

1. 验证 SVG 路径和 viewBox。 2. 计算路径边界并在 SF Symbols 模板边距内居中。 3. 将路径注入 SF Symbols 模板(Ultralight/Regular/Black)。 4. 在资源目录的 Symbols 文件夹内创建 `<symbol-name>.symbolset`。 5. 写入匹配的 `Contents.json`。

更多产品