sf_symbol_converter 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a73ca5114d60907080d27034713195e7dfd459aae8f332f8d9ca9dcdb0ff03da
+  data.tar.gz: f9336910f51849ebca69a10561dacfcdefac5a0c0de792a75a74af9f5e76158f
+SHA512:
+  metadata.gz: 6922fe44fefd4ac87ad6a2f76a9245d63c19eead6338ea959049725da965b10792066204df14e3a60362b6e31c361dc964dc952c7cd74728d68682bab0ccf4a3
+  data.tar.gz: d2caa2b4f7bb4fa1c4c1b20b26a7e37d56acddd222042ad1d0409fa7c6e9ccab71b86ce6b56745deaa44e804551e8320e8ae79481dd9b52108b4db7009343ae9

data/assets/template.svg

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--Generator: Apple Native CoreSVG 232.5-->
+<!DOCTYPE svg
+PUBLIC "-//W3C//DTD SVG 1.1//EN"
+       "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3300" height="2200">
+ <!--glyph: "uni100000.medium", point size: 100.0, font version: "19.2d2e1", template writer version: "128"-->
+ <style>.SFSymbolsPreviewWireframe {fill:none;opacity:1.0;stroke:black;stroke-width:0.5}
+</style>
+ <g id="Notes">
+  <rect height="2200" id="artboard" style="fill:white;opacity:1" width="3300" x="0" y="0"/>
+  <line style="fill:none;stroke:black;opacity:1;stroke-width:0.5;" x1="263" x2="3036" y1="292" y2="292"/>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;font-weight:bold;" transform="matrix(1 0 0 1 263 322)">Weight/Scale Variations</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;" transform="matrix(1 0 0 1 559.711 322)">Ultralight</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;" transform="matrix(1 0 0 1 856.422 322)">Thin</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;" transform="matrix(1 0 0 1 1153.13 322)">Light</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;" transform="matrix(1 0 0 1 1449.84 322)">Regular</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;" transform="matrix(1 0 0 1 1746.56 322)">Medium</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;" transform="matrix(1 0 0 1 2043.27 322)">Semibold</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;" transform="matrix(1 0 0 1 2339.98 322)">Bold</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;" transform="matrix(1 0 0 1 2636.69 322)">Heavy</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;" transform="matrix(1 0 0 1 2933.4 322)">Black</text>
+  <line style="fill:none;stroke:black;opacity:1;stroke-width:0.5;" x1="263" x2="3036" y1="1903" y2="1903"/>
+  <g transform="matrix(0.2 0 0 0.2 263 1933)">
+   <path d="m46.2402 4.15039c21.5332 0 39.4531-17.8711 39.4531-39.4043s-17.9688-39.4043-39.502-39.4043c-21.4844 0-39.3555 17.8711-39.3555 39.4043s17.9199 39.4043 39.4043 39.4043Zm0-7.42188c-17.7246 0-31.8848-14.209-31.8848-31.9824s14.1113-31.9824 31.8359-31.9824c17.7734 0 32.0312 14.209 32.0312 31.9824s-14.209 31.9824-31.9824 31.9824Zm-17.9688-31.9824c0 2.14844 1.51367 3.61328 3.75977 3.61328h10.498v10.5957c0 2.19727 1.46484 3.71094 3.61328 3.71094 2.24609 0 3.71094-1.51367 3.71094-3.71094v-10.5957h10.5957c2.19727 0 3.71094-1.46484 3.71094-3.61328 0-2.19727-1.51367-3.71094-3.71094-3.71094h-10.5957v-10.5469c0-2.24609-1.46484-3.75977-3.71094-3.75977-2.14844 0-3.61328 1.51367-3.61328 3.75977v10.5469h-10.498c-2.24609 0-3.75977 1.51367-3.75977 3.71094Z"/>
+  </g>
+  <g transform="matrix(0.2 0 0 0.2 281.506 1933)">
+   <path d="m58.5449 14.5508c27.2461 0 49.8047-22.6074 49.8047-49.8047 0-27.2461-22.6074-49.8047-49.8535-49.8047-27.1973 0-49.7559 22.5586-49.7559 49.8047 0 27.1973 22.6074 49.8047 49.8047 49.8047Zm0-8.30078c-23.0469 0-41.4551-18.457-41.4551-41.5039s18.3594-41.5039 41.4062-41.5039 41.5527 18.457 41.5527 41.5039-18.457 41.5039-41.5039 41.5039Zm-22.6562-41.5039c0 2.39258 1.66016 4.00391 4.15039 4.00391h14.3555v14.4043c0 2.44141 1.66016 4.15039 4.05273 4.15039 2.44141 0 4.15039-1.66016 4.15039-4.15039v-14.4043h14.4043c2.44141 0 4.15039-1.61133 4.15039-4.00391 0-2.44141-1.70898-4.15039-4.15039-4.15039h-14.4043v-14.3555c0-2.49023-1.70898-4.19922-4.15039-4.19922-2.39258 0-4.05273 1.70898-4.05273 4.19922v14.3555h-14.3555c-2.49023 0-4.15039 1.70898-4.15039 4.15039Z"/>
+  </g>
+  <g transform="matrix(0.2 0 0 0.2 304.924 1933)">
+   <path d="m74.8535 28.3203c34.8145 0 63.623-28.8086 63.623-63.5742 0-34.8145-28.8574-63.623-63.6719-63.623-34.7656 0-63.5254 28.8086-63.5254 63.623 0 34.7656 28.8086 63.5742 63.5742 63.5742Zm0-9.08203c-30.1758 0-54.4434-24.3164-54.4434-54.4922 0-30.2246 24.2188-54.4922 54.3945-54.4922 30.2246 0 54.541 24.2676 54.541 54.4922 0 30.1758-24.2676 54.4922-54.4922 54.4922Zm-28.8574-54.4922c0 2.58789 1.85547 4.39453 4.58984 4.39453h19.7266v19.7754c0 2.68555 1.85547 4.58984 4.44336 4.58984 2.68555 0 4.54102-1.85547 4.54102-4.58984v-19.7754h19.7754c2.68555 0 4.58984-1.80664 4.58984-4.39453 0-2.73438-1.85547-4.58984-4.58984-4.58984h-19.7754v-19.7266c0-2.73438-1.85547-4.63867-4.54102-4.63867-2.58789 0-4.44336 1.9043-4.44336 4.63867v19.7266h-19.7266c-2.73438 0-4.58984 1.85547-4.58984 4.58984Z"/>
+  </g>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;font-weight:bold;" transform="matrix(1 0 0 1 263 1953)">Design Variations</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;" transform="matrix(1 0 0 1 263 1971)">Symbols are supported in up to nine weights and three scales.</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;" transform="matrix(1 0 0 1 263 1989)">For optimal layout with text and other symbols, vertically align</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;" transform="matrix(1 0 0 1 263 2007)">symbols with the adjacent text.</text>
+  <line style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;" x1="776" x2="776" y1="1919" y2="1933"/>
+  <g transform="matrix(0.2 0 0 0.2 776 1933)">
+   <path d="m16.5527 0.78125c2.58789 0 3.85742-0.976562 4.78516-3.71094l6.29883-17.2363h28.8086l6.29883 17.2363c0.927734 2.73438 2.19727 3.71094 4.73633 3.71094 2.58789 0 4.24805-1.5625 4.24805-4.00391 0-0.830078-0.146484-1.61133-0.537109-2.63672l-22.9004-60.9863c-1.12305-2.97852-3.125-4.49219-6.25-4.49219-3.02734 0-5.07812 1.46484-6.15234 4.44336l-22.9004 61.084c-0.390625 1.02539-0.537109 1.80664-0.537109 2.63672 0 2.44141 1.5625 3.95508 4.10156 3.95508Zm13.4766-28.3691 11.8652-32.8613h0.244141l11.8652 32.8613Z"/>
+  </g>
+  <line style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;" x1="792.836" x2="792.836" y1="1919" y2="1933"/>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;font-weight:bold;" transform="matrix(1 0 0 1 776 1953)">Margins</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;" transform="matrix(1 0 0 1 776 1971)">Leading and trailing margins on the left and right side of each symbol</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;" transform="matrix(1 0 0 1 776 1989)">can be adjusted by modifying the x-location of the margin guidelines.</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;" transform="matrix(1 0 0 1 776 2007)">Modifications are automatically applied proportionally to all</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;" transform="matrix(1 0 0 1 776 2025)">scales and weights.</text>
+  <g transform="matrix(0.2 0 0 0.2 1289 1933)">
+   <path d="m14.209 9.32617 8.49609 8.54492c4.29688 4.3457 9.22852 4.05273 13.8672-1.07422l53.4668-58.9355-4.83398-4.88281-53.0762 58.3984c-1.75781 2.00195-3.41797 2.49023-5.76172 0.146484l-5.85938-5.81055c-2.34375-2.29492-1.80664-4.00391 0.195312-5.81055l57.373-54.0039-4.88281-4.83398-57.959 54.4434c-4.93164 4.58984-5.32227 9.47266-1.02539 13.8184Zm32.0801-90.9668c-2.09961 2.05078-2.24609 4.93164-1.07422 6.88477 1.17188 1.80664 3.4668 2.97852 6.68945 2.14844 7.32422-1.70898 14.9414-2.00195 22.0703 2.68555l-2.92969 7.27539c-1.70898 4.15039-0.830078 7.08008 1.85547 9.81445l11.4746 11.5723c2.44141 2.44141 4.49219 2.53906 7.32422 2.05078l5.32227-0.976562 3.32031 3.36914-0.195312 2.7832c-0.195312 2.49023 0.439453 4.39453 2.88086 6.78711l3.80859 3.71094c2.39258 2.39258 5.46875 2.53906 7.8125 0.195312l14.5508-14.5996c2.34375-2.34375 2.24609-5.32227-0.146484-7.71484l-3.85742-3.80859c-2.39258-2.39258-4.24805-3.17383-6.64062-2.97852l-2.88086 0.244141-3.22266-3.17383 1.2207-5.61523c0.634766-2.83203-0.146484-5.0293-3.07617-7.95898l-10.9863-10.9375c-16.6992-16.6016-38.8672-16.2109-53.3203-1.75781Zm7.4707 1.85547c12.1582-8.88672 28.6133-7.37305 39.7461 3.75977l12.1582 12.0605c1.17188 1.17188 1.36719 2.09961 1.02539 3.80859l-1.61133 7.42188 7.51953 7.42188 4.93164-0.292969c1.26953-0.0488281 1.66016 0.0488281 2.63672 1.02539l2.88086 2.88086-12.207 12.207-2.88086-2.88086c-0.976562-0.976562-1.12305-1.36719-1.07422-2.68555l0.341797-4.88281-7.4707-7.42188-7.61719 1.26953c-1.61133 0.341797-2.34375 0.195312-3.56445-0.976562l-10.0098-10.0098c-1.26953-1.17188-1.41602-2.00195-0.634766-3.85742l4.39453-10.4492c-7.8125-7.27539-17.9688-10.4004-28.125-7.42188-0.78125 0.195312-1.07422-0.439453-0.439453-0.976562Z"/>
+  </g>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;font-weight:bold;" transform="matrix(1 0 0 1 1289 1953)">Exporting</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;" transform="matrix(1 0 0 1 1289 1971)">Symbols should be outlined when exporting to ensure the</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;" transform="matrix(1 0 0 1 1289 1989)">design is preserved when submitting to Xcode.</text>
+  <text id="template-version" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:end;" transform="matrix(1 0 0 1 3036 1933)">Template v.5.0</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:end;" transform="matrix(1 0 0 1 3036 1951)">Requires Xcode 15 or greater</text>
+  <text id="descriptive-name" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:end;" transform="matrix(1 0 0 1 3036 1969)">Generated from circle</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:end;" transform="matrix(1 0 0 1 3036 1987)">Typeset at 100.0 points</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;" transform="matrix(1 0 0 1 263 726)">Small</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;" transform="matrix(1 0 0 1 263 1156)">Medium</text>
+  <text style="stroke:none;fill:black;font-family:sans-serif;font-size:13;" transform="matrix(1 0 0 1 263 1586)">Large</text>
+ </g>
+ <g id="Guides">
+  <g id="H-reference" style="fill:#27AAE1;stroke:none;" transform="matrix(1 0 0 1 339 696)">
+   <path d="M0.993654 0L3.63775 0L29.3281-67.1323L30.0303-67.1323L30.0303-70.459L28.1226-70.459ZM11.6885-24.4799L46.9815-24.4799L46.2315-26.7285L12.4385-26.7285ZM55.1196 0L57.7637 0L30.6382-70.459L29.4326-70.459L29.4326-67.1323Z"/>
+  </g>
+  <line id="Baseline-S" style="fill:none;stroke:#27AAE1;opacity:1;stroke-width:0.5;" x1="263" x2="3036" y1="696" y2="696"/>
+  <line id="Capline-S" style="fill:none;stroke:#27AAE1;opacity:1;stroke-width:0.5;" x1="263" x2="3036" y1="625.541" y2="625.541"/>
+  <g id="H-reference" style="fill:#27AAE1;stroke:none;" transform="matrix(1 0 0 1 339 1126)">
+   <path d="M0.993654 0L3.63775 0L29.3281-67.1323L30.0303-67.1323L30.0303-70.459L28.1226-70.459ZM11.6885-24.4799L46.9815-24.4799L46.2315-26.7285L12.4385-26.7285ZM55.1196 0L57.7637 0L30.6382-70.459L29.4326-70.459L29.4326-67.1323Z"/>
+  </g>
+  <line id="Baseline-M" style="fill:none;stroke:#27AAE1;opacity:1;stroke-width:0.5;" x1="263" x2="3036" y1="1126" y2="1126"/>
+  <line id="Capline-M" style="fill:none;stroke:#27AAE1;opacity:1;stroke-width:0.5;" x1="263" x2="3036" y1="1055.54" y2="1055.54"/>
+  <g id="H-reference" style="fill:#27AAE1;stroke:none;" transform="matrix(1 0 0 1 339 1556)">
+   <path d="M0.993654 0L3.63775 0L29.3281-67.1323L30.0303-67.1323L30.0303-70.459L28.1226-70.459ZM11.6885-24.4799L46.9815-24.4799L46.2315-26.7285L12.4385-26.7285ZM55.1196 0L57.7637 0L30.6382-70.459L29.4326-70.459L29.4326-67.1323Z"/>
+  </g>
+  <line id="Baseline-L" style="fill:none;stroke:#27AAE1;opacity:1;stroke-width:0.5;" x1="263" x2="3036" y1="1556" y2="1556"/>
+  <line id="Capline-L" style="fill:none;stroke:#27AAE1;opacity:1;stroke-width:0.5;" x1="263" x2="3036" y1="1485.54" y2="1485.54"/>
+  <line id="left-margin-Ultralight-S" style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;" x1="515.649" x2="515.649" y1="600.785" y2="720.121"/>
+  <line id="right-margin-Ultralight-S" style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;" x1="603.773" x2="603.773" y1="600.785" y2="720.121"/>
+  <line id="left-margin-Regular-S" style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;" x1="1403.58" x2="1403.58" y1="600.785" y2="720.121"/>
+  <line id="right-margin-Regular-S" style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;" x1="1496.11" x2="1496.11" y1="600.785" y2="720.121"/>
+  <line id="left-margin-Black-S" style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;" x1="2884.57" x2="2884.57" y1="600.785" y2="720.121"/>
+  <line id="right-margin-Black-S" style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;" x1="2982.23" x2="2982.23" y1="600.785" y2="720.121"/>
+ </g>
+ <g id="Symbols">
+  <g id="Black-S" transform="matrix(1 0 0 1 2884.57 696)">
+   <path class="SFSymbolsPreviewWireframe" d="M48.8281 6.78711C71.9727 6.78711 90.8203-12.0605 90.8203-35.2051C90.8203-58.3496 71.9727-77.1973 48.8281-77.1973C25.6836-77.1973 6.83594-58.3496 6.83594-35.2051C6.83594-12.0605 25.6836 6.78711 48.8281 6.78711ZM48.8281-7.37305C33.4473-7.37305 20.9961-19.8242 20.9961-35.2051C20.9961-50.5859 33.4473-63.0371 48.8281-63.0371C64.209-63.0371 76.6602-50.5859 76.6602-35.2051C76.6602-19.8242 64.209-7.37305 48.8281-7.37305Z"/>
+  </g>
+  <g id="Regular-S" transform="matrix(1 0 0 1 1403.58 696)">
+   <path class="SFSymbolsPreviewWireframe" d="M46.2402 4.15039C67.7734 4.15039 85.6934-13.7207 85.6934-35.2539C85.6934-56.7871 67.7246-74.6582 46.1914-74.6582C24.707-74.6582 6.83594-56.7871 6.83594-35.2539C6.83594-13.7207 24.7559 4.15039 46.2402 4.15039ZM46.2402-3.27148C28.5156-3.27148 14.3555-17.4805 14.3555-35.2539C14.3555-53.0273 28.4668-67.2363 46.1914-67.2363C63.9648-67.2363 78.2227-53.0273 78.2227-35.2539C78.2227-17.4805 64.0137-3.27148 46.2402-3.27148Z"/>
+  </g>
+  <g id="Ultralight-S" transform="matrix(1 0 0 1 515.649 696)">
+   <path class="SFSymbolsPreviewWireframe" d="M44.0606 1.97072C64.5039 1.97072 81.2886-14.8105 81.2886-35.2539C81.2886-55.6973 64.5005-72.4785 44.0571-72.4785C23.5718-72.4785 6.83594-55.6973 6.83594-35.2539C6.83594-14.8105 23.5752 1.97072 44.0606 1.97072ZM44.0606-0.274438C24.7466-0.274438 9.04252-15.9365 9.04252-35.2539C9.04252-54.5713 24.7432-70.2334 44.0571-70.2334C63.3745-70.2334 79.04-54.5713 79.04-35.2539C79.04-15.9365 63.3779-0.274438 44.0606-0.274438Z"/>
+  </g>
+ </g>
+</svg>

data/bin/sf-symbol-converter

@@ -0,0 +1,41 @@
+#! /usr/bin/env ruby
+# frozen_string_literal: true
+
+require 'thor'
+require 'nokogiri'
+require './lib/sf_symbol_converter'
+
+# CLI for converting SF Symbols
+class SFSymbolCli < Thor
+  include Thor::Actions
+
+  TEMPLATE_PATH = 'assets/template.svg'
+
+  desc 'convert ICON_SVG [OUTPUT_SVG]', 'Converts an SF Symbol SVG to a template SVG'
+  def convert(icon_svg_path, output_path = 'output.svg')
+    template_svg = Nokogiri::XML(File.open(TEMPLATE_PATH))
+    icon_svg = Nokogiri::XML(File.open(icon_svg_path))
+
+    output_path = output_path || 'output.svg'
+
+    converter = SFSymbolConverter.new(template_svg, icon_svg)
+    converted_svg = converter.convert
+
+    pretty_printed_svg = Nokogiri::XML(converted_svg.to_s, &:noblanks).to_xml(indent: 2)
+
+    File.open(output_path, 'w') { |file| file.write(pretty_printed_svg) }
+  end
+
+  desc 'batch_convert INPUT_DIR OUTPUT_DIR', 'Converts all SVGs in a directory to SFSymbols'
+  def batch_convert(input_dir, output_dir)
+    Dir.glob("#{input_dir}/*.svg").each do |icon_svg_path|
+      icon_svg = Nokogiri::XML(File.open(icon_svg_path))
+
+      output_path = "#{output_dir}/#{File.basename(icon_svg_path)}"
+      convert(icon_svg_path, output_path)
+    end
+  end
+end
+
+
+SFSymbolCli.start(ARGV)

data/lib/sf_symbol_converter.rb

@@ -0,0 +1,122 @@
+# frozen_string_literal: true
+
+require 'nokogiri'
+require './lib/utils'
+
+require './lib/validators/icon_validator'
+require './lib/validators/template_validator'
+require './lib/trimmer/template_trimmer'
+
+# Given a source SVG and a SFSymbol template, generate a SFSymbol
+class SFSymbolConverter
+  SOURCE_ICON_VIEWBOX_SIZE = 24
+
+  REFERENCE_SFSYMBOL_FONT_CAPS_HEIGHT = 14
+  TARGET_SYMBOL_HEIGHT_MEDIUM = 16
+
+  SFSYMBOL_MEDIUM_TO_SMALL_SCALE = 0.783
+
+  MARGIN_LINE_WIDTH = 0.5
+
+  attr_accessor :template_svg
+  attr_reader :icon_svg, :icon_validator, :template_validator
+
+  def initialize(template_svg, icon_svg)
+    @template_svg = template_svg
+    @icon_svg = icon_svg
+
+    @icon_validator = IconValidator.new(SOURCE_ICON_VIEWBOX_SIZE)
+    @template_validator = TemplateValidator.new
+
+    @template_trimmer = TemplateTrimmer.new
+
+    @icon_validator.validate(icon_svg)
+    @template_validator.validate(template_svg)
+  end
+
+  def convert
+    @template_svg = @template_trimmer.trim(template_svg)
+    replace_template_symbols_with_source_icons
+    adjust_guidelines
+    @template_svg
+  end
+
+  private
+
+  def cap_height_small
+    baseline_y = get_guide_value(template_svg, :y, 'Baseline-S')
+    capline_y = get_guide_value(template_svg, :y, 'Capline-S')
+
+    (baseline_y - capline_y).abs
+  end
+
+  def scale_factor_small
+    cap_height_small / REFERENCE_SFSYMBOL_FONT_CAPS_HEIGHT * SFSYMBOL_MEDIUM_TO_SMALL_SCALE
+  end
+
+  def scaled_size_small
+    SOURCE_ICON_VIEWBOX_SIZE * scale_factor_small
+  end
+
+  def vertical_center_small
+    baseline_y = get_guide_value(template_svg, :y, 'Baseline-S')
+    capline_y = get_guide_value(template_svg, :y, 'Capline-S')
+
+    (baseline_y + capline_y) / 2
+  end
+
+  def horizontal_center(symbol)
+    left_margin = get_guide_value(template_svg, :x, "left-margin-#{symbol}")
+    right_margin = get_guide_value(template_svg, :x, "right-margin-#{symbol}")
+
+    (left_margin + right_margin) / 2
+  end
+
+  def adjusted_left_margin(symbol)
+    # TODO: is it really (MARGIN_LINE_WIDTH / 2) or just MARGIN_LINE_WIDTH
+    horizontal_center(symbol) - scaled_size_small / 2 - (MARGIN_LINE_WIDTH / 2)
+  end
+
+  def adjusted_right_margin(symbol)
+    # TODO: is it really (MARGIN_LINE_WIDTH / 2) or just MARGIN_LINE_WIDTH
+    horizontal_center(symbol) + scaled_size_small / 2 + (MARGIN_LINE_WIDTH / 2)
+  end
+
+  def transform_matrix(symbol)
+    translation_x = horizontal_center(symbol) - scaled_size_small / 2
+    translation_y = vertical_center_small - scaled_size_small / 2
+
+    matrix_text = '%<scale>.6f 0 0 %<scale>.6f %<trans_x>.6f %<trans_y>.6f'
+    parameters = { scale: scale_factor_small, trans_x: translation_x, trans_y: translation_y }
+
+    format(matrix_text, parameters)
+  end
+
+  IDS_TO_REPLACE = %w[Ultralight-S Regular-S Black-S].freeze
+
+  def replace_template_symbols_with_source_icons
+    IDS_TO_REPLACE.each do |symbol|
+      template_symbol_node = template_svg.at_css("##{symbol}")
+
+      template_symbol_node['transform'] = "matrix(#{transform_matrix(symbol)})"
+
+      paths = icon_svg.dup.root.children
+      paths.each do |node|
+        node.delete('fill')
+        node['class'] = 'SFSymbolsPreviewWireframe'
+      end
+
+      template_symbol_node.children = paths
+    end
+  end
+
+  def adjust_guidelines
+    IDS_TO_REPLACE.each do |symbol|
+      left_margin_node = template_svg.at_css("#left-margin-#{symbol}")
+      left_margin_node['x1'] = left_margin_node['x2'] = adjusted_left_margin(symbol).to_s
+
+      right_margin_node = template_svg.at_css("#right-margin-#{symbol}")
+      right_margin_node['x1'] = right_margin_node['x2'] = adjusted_right_margin(symbol).to_s
+    end
+  end
+end

data/lib/trimmer/template_trimmer.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+# given a template SVG, remove unused icons
+class TemplateTrimmer
+  def trim(template_svg)
+    remove_unused_template_icons(template_svg)
+  end
+
+  private
+
+  ICON_SIZE = %w[S M L].freeze
+  ICON_WEIGHTS = %w[Black Heavy Bold Semibold Medium Regular Light Thin Ultralight].freeze
+
+  IDS_TO_KEEP = %w[Ultralight-S Regular-S Black-S].freeze
+
+  def remove_unused_template_icons(template_svg)
+    ICON_SIZE.each do |size|
+      ICON_WEIGHTS.each do |weight|
+        id = "#{weight}-#{size}"
+        next if IDS_TO_KEEP.include?(id)
+
+        template_svg.at_css("##{id}")&.remove
+      end
+    end
+
+    template_svg
+  end
+
+  # TODO: should we also clean up margin lines ?
+  # ... But it is complicated as the static version provides only M margin (and not S like the variable version)
+end

data/lib/utils.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+def get_guide_value(template_svg, axis, xml_id)
+  guide_node = template_svg.at_css("##{xml_id}")
+  raise 'invalid axis' unless %i[x y].include?(axis)
+
+  val1 = guide_node["#{axis}1"]
+  val2 = guide_node["#{axis}2"]
+  raise "invalid #{xml_id} guide" if val1.nil? || val1 != val2
+
+  val1.to_f # Convert the value from string to float.
+end

data/lib/validators/icon_validator.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+# given an icon SVG, validate its dimensions and viewbox
+class IconValidator
+  attr_reader :viewbox_size
+
+  def initialize(viewbox_size)
+    @viewbox_size = viewbox_size
+  end
+
+  def validate(icon_svg)
+    raise "expected icon size to be (#{viewbox_size}, #{viewbox_size})" unless icon_dimension_valid?(icon_svg)
+    raise "expected icon viewbox to be (0, 0, #{viewbox_size}, #{viewbox_size})" unless icon_viewbox_valid?(icon_svg)
+  end
+
+  private
+
+  def icon_dimension_valid?(icon_svg)
+    is_width_ok = icon_svg.root['width'] == viewbox_size.to_s
+    is_height_ok = icon_svg.root['height'] == viewbox_size.to_s
+
+    is_width_ok && is_height_ok
+  end
+
+  def icon_viewbox_valid?(icon_svg)
+    icon_svg.root['viewBox'] == "0 0 #{viewbox_size} #{viewbox_size}"
+  end
+end

data/lib/validators/template_validator.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+# given a template SVG, validate its structure and guidelines
+class TemplateValidator
+  def validate(template_svg)
+    validate_required_sections(template_svg)
+    validate_required_symbols(template_svg)
+    validate_guidelines(template_svg)
+    validate_margin_lines(template_svg)
+  end
+
+  private
+
+  REQUIRED_SECTIONS = %w[Notes Symbols Guides].freeze
+
+  def validate_required_sections(template_svg)
+    REQUIRED_SECTIONS.each do |section_id|
+      validate_presence(template_svg, "g##{section_id}", "Invalid template: Missing required section #{section_id}")
+    end
+  end
+
+  REQUIRED_SYMBOLS = %w[Ultralight-S Regular-S Black-S].freeze
+
+  def validate_required_symbols(template_svg)
+    symbols_section = template_svg.at_css('g#Symbols')
+    REQUIRED_SYMBOLS.each do |symbol_id|
+      validate_presence_within(symbols_section, "g##{symbol_id}", "Invalid template: Missing symbol #{symbol_id}")
+    end
+  end
+
+  REQUIRED_GUIDELINE_SCALES = %w[S L M].freeze
+  REQUIRED_GUIDELINE_TYPES = %w[Baseline Capline].freeze
+
+  def validate_guidelines(template_svg)
+    REQUIRED_GUIDELINE_SCALES.each do |scale|
+      REQUIRED_GUIDELINE_TYPES.each do |line_type|
+        validate_presence(template_svg, "line##{line_type}-#{scale}", "Invalid template: Missing #{line_type}-#{scale}")
+      end
+    end
+  end
+
+  REQUIRED_MARGIN_SCALES = %w[S].freeze
+  REQUIRED_MARGIN_WEIGHTS = %w[Ultralight Regular Black].freeze
+  REQUIRED_MARGIN_TYPES = %w[left-margin right-margin].freeze
+
+  def validate_margin_lines(template_svg)
+    REQUIRED_MARGIN_WEIGHTS.product(REQUIRED_MARGIN_SCALES).each do |weight, scale|
+      REQUIRED_MARGIN_TYPES.each do |margin_type|
+        full_margin_id = "#{margin_type}-#{weight}-#{scale}"
+        validate_presence(template_svg, "line##{full_margin_id}", "Invalid template: Missing #{full_margin_id}")
+      end
+    end
+  end
+
+  def validate_presence(root, selector, error_message)
+    raise error_message unless root.at_css(selector)
+  end
+
+  def validate_presence_within(parent, selector, error_message)
+    raise error_message unless parent.at_css(selector)
+  end
+end

metadata

@@ -0,0 +1,94 @@
+--- !ruby/object:Gem::Specification
+name: sf_symbol_converter
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Yang Liu
+- Tycho Tatitscheff
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2024-04-10 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: nokogiri
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.16'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.16.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.16'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.16.3
+- !ruby/object:Gem::Dependency
+  name: thor
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.1.0
+description: Given a SVG icon with viewBox that respect [material icon principles](https://m3.material.io/styles/icons/designing-icons),
+  generate appropriate SFSymbol
+email:
+- yangl@bam.tech
+- tychot@bam.tech
+executables:
+- sf-symbol-converter
+extensions: []
+extra_rdoc_files: []
+files:
+- assets/template.svg
+- bin/sf-symbol-converter
+- lib/sf_symbol_converter.rb
+- lib/trimmer/template_trimmer.rb
+- lib/utils.rb
+- lib/validators/icon_validator.rb
+- lib/validators/template_validator.rb
+homepage: https://github.com/tychota/SfSymbolExporter
+licenses:
+- MIT
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.7.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.7
+signing_key:
+specification_version: 4
+summary: Convert SVG icon to SFSymbol
+test_files: []