{"id":30027820,"url":"https://github.com/moox/sf-symbols-svg","last_synced_at":"2025-08-06T13:59:37.887Z","repository":{"id":293438571,"uuid":"984036974","full_name":"MoOx/sf-symbols-svg","owner":"MoOx","description":"Convert Apple SF Symbols to SVGs","archived":false,"fork":false,"pushed_at":"2025-06-17T06:29:06.000Z","size":121,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-29T10:25:28.191Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MoOx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"MoOx","ko_fi":"moox__","liberapay":"MoOx","custom":"https://www.paypal.com/paypalme/MoOx"}},"created_at":"2025-05-15T09:49:36.000Z","updated_at":"2025-06-18T15:02:20.000Z","dependencies_parsed_at":"2025-05-15T10:52:39.183Z","dependency_job_id":null,"html_url":"https://github.com/MoOx/sf-symbols-svg","commit_stats":null,"previous_names":["moox/sf-symbols-to-svg","moox/sf-symbols-svg"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/MoOx/sf-symbols-svg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Fsf-symbols-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Fsf-symbols-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Fsf-symbols-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Fsf-symbols-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MoOx","download_url":"https://codeload.github.com/MoOx/sf-symbols-svg/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Fsf-symbols-svg/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269093047,"owners_count":24358583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-06T02:00:09.910Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-06T13:59:34.777Z","updated_at":"2025-08-06T13:59:37.877Z","avatar_url":"https://github.com/MoOx.png","language":"JavaScript","funding_links":["https://github.com/sponsors/MoOx","https://ko-fi.com/moox__","https://liberapay.com/MoOx","https://www.paypal.com/paypalme/MoOx"],"categories":[],"sub_categories":[],"readme":"# SF Symbols to SVG\n\n\u003ca href=\"https://github.com/MoOx/sf-symbols-svg?sponsor=1\"\u003e\n  \u003cimg width=\"140\" align=\"right\" alt=\"Sponsoring button\" src=\"https://github.com/moox/.github/raw/main/FUNDING.svg\"\u003e\n\u003c/a\u003e\n\n[![GitHub package.json version](https://img.shields.io/github/package-json/v/MoOx/sf-symbols-svg) ![npm downloads](https://img.shields.io/npm/dm/sf-symbols-svg)](https://www.npmjs.com/package/sf-symbols-svg)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/MoOx/sf-symbols-svg/build.yml?branch=main)](https://github.com/MoOx/sf-symbols-svg/actions)\n[![License](https://img.shields.io/github/license/MoOx/sf-symbols-svg)](https://github.com/MoOx/sf-symbols-svg)  \n![My website moox.io](https://img.shields.io/badge/%F0%9F%8C%8D%20-https%3A%2F%2Fmoox.io-gray?style=social)\n[![GitHub followers](https://img.shields.io/github/followers/MoOx?style=social\u0026label=GitHub)](https://github.com/MoOx)\n[![LinkedIn Follow](https://img.shields.io/badge/LinkedIn-%20?style=social\u0026logo=invision\u0026logoColor=%230077B5)](https://www.linkedin.com/in/maxthirouin/)\n[![BlueSky Follow](https://img.shields.io/badge/BlueSky-%20?style=social\u0026logo=bluesky)](https://bsky.app/profile/moox.io)\n[![X Follow](https://img.shields.io/twitter/follow/MoOx?style=social\u0026label=)](https://x.com/MoOx)\n\n\u003e SF Symbols to SVGs. Period.\n\n[Apple SF Symbols](https://developer.apple.com/sf-symbols/) is an icon set with more thant 6,000 symbols.\nUnfortunately, this are not available on the web.\nThis tool solve this.\n\n\u003e [!WARNING]\n\u003e This tool requires you to have the [_SF Pro Text_ font](https://developer.apple.com/fonts/) installed on your system or in a custom directory.\n\n\u003e [!TIP]\n\u003e SF Symbols to SVG can be coupled with [React from SVG](https://github.com/MoOx/react-from-svg) to generate React components from SVGs.\n\n## Usage\n\nSF Symbols to SVG is available as a CLI tool:\n\n```console\nnpx sf-symbols-svg --help\n```\n\n#### Available Options\n\n```console\n--size, -s       Font size for symbols (default: 24)\n--padding, -p    Padding in pixels (default: 2)\n--weight, -w     Font weights to include (default: regular)\n                 Can specify multiple: -w regular -w bold\n--output, -o     Output directory (default: ./sf-symbols-svgs)\n--fonts-dir, -f  Directory containing SF Pro Text fonts (default: /Library/Fonts)\n--sf-version     SF Symbols version to use (default: latest)\n--sources-dir    Directory containing SF Symbols data files (default: ./sources)\n--icons-list     Path to a file containing a list of icons to process, one name per line (optional)\n--help, -h       Show this help message\n--version        Show version of SF Symbols supported by this tool.\n```\n\n\u003e [!NOTE]\n\u003e SF Symbols to SVG will always try to use the latest version of SF Symbols supported by this tool.\n\u003e You can check in the `sources/` directory to see which versions are supported.\n\n#### Examples\n\n```console\n# Generate SVGs for the latest version of SF Symbols, in 24x24 SVGs with 2px padding, in ./svg-symbols-svgs folder\nnpx sf-symbols-svg --weight all\n\n# Generate SVGs with larger size and padding\nsf-symbols-svg --size 32 --padding 4\n\n# Generate SVGs for multiple weights\nsf-symbols-svg --weight bold --weight black\n\n# Specify custom output directory\nsf-symbols-svg --output ./my-icons\n\n# Specify a different SF Symbols version (if available)\nsf-symbols-svg --sf-version 6.0\n\n# Combine options\nsf-symbols-svg --size 48 --padding 8 --weight light --weight regular --weight bold --output ./custom-icons --fonts-dir /Users/moox/Library/Fonts\n\n# Process only specific icons\nsf-symbols-svg --icons-list /path/to/your/icons-list.txt\n```\n\n## Creating a new version\n\n## About SF Symbols Versions and Font Compatibility\n\n### SF Symbols Versions\n\nThis tool automatically detects supported SF Symbols versions by scanning the `sources/` directory. Each version requires its own data files (`symbols.txt` and `names.txt`) which are already included in the repository for some versions.\n\nThe tool will automatically use the most recent version as the default, but you can specify a different version using the `--sf-version` option. If no matching versions are detected in the `sources/` directory, the tool will display an error message.\n\nIf you want to use a different version (when new SF Symbols versions are released):\n\n1. Create a new directory in `sources/{version}/` (example: `sources/7.0/`)\n2. Extract the character mappings:\n   - Get the [SF Symbols app](https://developer.apple.com/sf-symbols/) and open the app\n   - Select all symbols (`cmd + A` or `Edit` \u003e `Select All`)\n   - Right click on the selection, and press `Copy all {x} symbols`\n   - Paste the symbols into a file at `sources/{version}/symbols.txt`\n   - Right click again on the selection, and press `Copy all {x} names`\n   - Paste the names into a file at `sources/{version}/names.txt`\n\nThat's it! The tool will automatically detect the new version and use it as the default (since it's the most recent).\n\n### Using a Custom Sources Directory\n\nIf you want to use a different directory for your SF Symbols data files, you can specify it with the `--sources-dir` option:\n\n```sh\nsf-symbols-svg --sources-dir /path/to/your/sources\n```\n\nThe custom sources directory must follow the same structure as the default one:\n\n```\nsources/\n  ├── 6.0/\n  │   ├── symbols.txt\n  │   └── names.txt\n  ├── 6.1/\n  │   ├── symbols.txt\n  │   └── names.txt\n  └── ...\n```\n\nThe tool will automatically detect available versions from the provided directory and use the most recent one as the default.\n\n## Processing Only Specific Icons\n\nIf you want to process only a limited subset of icons, you can create a text file with one icon name per line and use the `--icons-list` option:\n\n```sh\nsf-symbols-svg --icons-list /path/to/your/icons-list.txt\n```\n\nExample of an icons list file:\n\n```\nmoon.stars.fill\npuzzlepiece\namplifier\nfigure.hiking\n```\n\nThis is particularly useful for:\n\n- Testing the tool with a smaller set of icons\n- Generating only the specific icons you need for your project\n- Reducing processing time when you only need a few symbols\n\n### Font Compatibility\n\n\u003e [!WARNING]\n\u003e SF Symbols requires specific _SF Pro Text_ font versions that match the SF Symbols version you're using. If the font versions don't match, the symbols may not render correctly.\n\n\u003e [!CAUTION]\n\u003e The Apple SF Symbols app will display a warning at the top of the application if your installed fonts don't match the expected version. Make sure to check this warning and install the appropriate font version from [Apple's website](https://developer.apple.com/fonts/).\n\n### About Font Files\n\nTo use this script, you need to have the SF Pro Text fonts installed on your system or in a custom directory.\n\n#### Using system-installed fonts (recommended)\n\nIf you have SF Pro Text fonts installed on your system (typically in `/Library/Fonts`), the script will automatically find and use them. This is the default behavior.\n\n```console\n# Use fonts from the default location (/Library/Fonts)\nsf-symbols-svg\n```\n\n#### Using fonts from a custom directory\n\nIf your fonts are installed in a different location, you can specify it with the `--fonts-dir` option:\n\n```console\n# Use fonts from a custom location\nsf-symbols-svg --fonts-dir ~/Library/Fonts\n````\n\n#### Installing SF Pro Text fonts\n\nIf you don't have the fonts installed:\n\n1. Download SF Pro font from [Apple's website](https://developer.apple.com/fonts/).\n2. Install the font using the provided installer.\n3. The fonts will be installed in `/Library/Fonts` by default.\n\n---\n\n\u003e [!NOTE]\n\u003e For legal reasons, this repository does not include the SF Pro Text font files. You must download and install them from Apple's website. Make sure to use font versions that are compatible with the SF Symbols version you are using (check for warnings in the SF Symbols app).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoox%2Fsf-symbols-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoox%2Fsf-symbols-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoox%2Fsf-symbols-svg/lists"}