make_sf_symbols
Differences
This shows you the differences between two versions of the page.
| — |
make_sf_symbols [2025/08/03 14:14] (current) admin created |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | # Make SF Symbols | ||
| + | This error from the SF Symbols app: | ||
| + | |||
| + | “The symbol could not be imported. Errors: Required symbol variant (Regular weight, Medium scale) could not be found.” | ||
| + | |||
| + | means that your SVG file is missing the mandatory symbol variant: Regular weight, Medium scale. | ||
| + | |||
| + | ⸻ | ||
| + | |||
| + | 🔧 Cause | ||
| + | |||
| + | SF Symbols expects your SVG to include one or more symbol variants (combinations of weight and scale). Among them, the Regular weight and Medium scale variant is mandatory — it’s the baseline that all other variants are derived from. | ||
| + | |||
| + | Each variant is defined inside the SVG using the sf:weight and sf:scale custom attributes (namespaced). When this required variant is missing, the app rejects the import. | ||
| + | |||
| + | Even if you’re using Apple’s official symbol template, it’s possible that: | ||
| + | • You modified or deleted the Regular-Medium layer. | ||
| + | • Illustrator stripped out the necessary attributes. | ||
| + | • You exported to SVG in a way that flattened groups or removed metadata. | ||
| + | |||
| + | ⸻ | ||
| + | |||
| + | ✅ How to Fix It | ||
| + | |||
| + | Option 1: Check Layer Naming in Illustrator | ||
| + | |||
| + | SF Symbols uses layer names (in combination with SVG metadata) to identify variants. | ||
| + | 1. Open the template in Illustrator. | ||
| + | 2. In the Layers panel, make sure there’s a layer named exactly: | ||
| + | |||
| + | Regular-M | ||
| + | |||
| + | This stands for “Regular weight, Medium scale.” | ||
| + | |||
| + | 3. Your main icon artwork should be inside that Regular-M layer. | ||
| + | 4. If it’s missing or renamed, restore it and re-export the SVG. | ||
| + | |||
| + | Option 2: Export SVG with Correct Settings | ||
| + | |||
| + | When exporting from Illustrator: | ||
| + | • Use File > Export > Export As… | ||
| + | • Choose SVG. | ||
| + | • In the SVG options dialog: | ||
| + | • SVG Profiles: SVG 1.1 or 1.0 | ||
| + | • CSS Properties: Presentation Attributes | ||
| + | • Decimal Places: 2 or more | ||
| + | • Responsive: Unchecked | ||
| + | • Include: Adobe Illustrator Editable Data (optional) | ||
| + | • Minify: Unchecked | ||
| + | • Embed: Fonts | ||
| + | |||
| + | Make sure the output still contains the structure and layer metadata that SF Symbols expects. | ||
| + | |||
| + | Option 3: Verify in Text Editor | ||
| + | |||
| + | Open the exported SVG file in a text editor and look for this section: | ||
| + | |||
| + | ```` | ||
| + | <g sf:weight="regular" sf:scale="medium"> | ||
| + | <!-- your paths here --> | ||
| + | </g> | ||
| + | ```` | ||
| + | |||
| + | If it’s missing, SF Symbols will throw the error. You can try manually adding it if needed, but the best fix is to structure the Illustrator file correctly before export. | ||
| + | |||
| + | ⸻ | ||
| + | |||
| + | 💡 Tip: Use Apple’s symbol.svg as Reference | ||
| + | |||
| + | If you’re starting from scratch, download Apple’s official [SF Symbols template pack](https://developer.apple.com/design/resources/#sf-symbols), open a symbol.svg file that works, and inspect how it’s structured — layer names and SVG groups matter. | ||
| + | |||
| + | ⸻ | ||
make_sf_symbols.txt · Last modified: 2025/08/03 14:14 by admin