Skip to content

Latest commit

 

History

History
50 lines (36 loc) · 1.62 KB

README.md

File metadata and controls

50 lines (36 loc) · 1.62 KB
Raw

Prepare SF Symbols 4 for HA Custom Symbols

Requirements

Installation

  1. Clone or download this repository
  2. run npm install

Create custom symbols

Follow the instructions from Apple

Create svg files

  1. export required symbols from SF Symbols App as version 4+
  2. run node prepare.js path/to/svg-folder
    creates a result folder in your working directory
  3. run node test/server.js and inspect symbols in a webbrowser
  4. (optional) optimize symbols with Inkscape

For all script arguments run node prepare.js --help

Optimize svg file

  1. open svg in Inkscape
  2. duplicate both overlapping files
  3. path > difference
  4. save a copy
  5. past only new created path to existing svg
  6. delete attribute id and keep only hierarchical (primary) class on new path. Eg. 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="7.79 -90 108 108">
  <path class="monochrome-0 multicolor-0:indigo" fill="#5856d6" d="m 9 ..."/>
  <path class="monochrome-1#clear multicolor-1:gray#clear hierarchical-1:secondary#clear"    fill="#8e8e93" d="m 10 ..."/>
  <path class="hierarchical-0:primary" d="M 22 ..."/>
</svg>

Search for tertiary#clear, secondary#clear to find the few icons which need this optimization.

Limitations

  • SF Symbols width is variable. The script fit them into a square.
  • Please check copyright of used symbols.