Add Support for Exporting Type-Safe Swift Struct of Icon Names (#1)

* Update readme * update bootstrap, links, css * add swift struct conversion * render swift struct in html * properly indent json and xml * make code style, add callouts * typo
dockwa · Jan 26, 2024 · 64721f2 · 64721f2
1 parent 3b1ff8f
commit 64721f2
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -32,28 +32,31 @@ One of the biggest challenges to using custom Fort Awesome icon sets is mapping
 1) Download your kit from [Fort Awesome](https://fortawesome.com/kits/), drag the .ttf file into your Xcode project, and add the `Fonts provided by application` key to your Info.plist with an entry that is the name of your font including the .ttf file extension (i.e. `myfont.ttf`). 
 
 
-2) Follow the instructions [here](https://dockwa.github.io/fort-awesome-everywhere/), and add the downloaded JSON file to your Xcode project.
+2) Follow the instructions [here](https://dockwa.github.io/fort-awesome-everywhere/), and add the downloaded JSON (and optional Swift file) to your Xcode project.
 
 
 3) Add the [FontAwesomeKit](https://github.com/PrideChung/FontAwesomeKit) Core library to your project. If you use CocoaPods:
 ```ruby
 'pod FontAwesomeKit/Core'
 ```
 
-4) Use the sample Icon class [here](https://github.com/dockwa/fort-awesome-everywhere/blob/gh-pages/Icon.swift) and customize if needed. 
-
+4) Use the sample Icon class [here](https://github.com/dockwa/fort-awesome-everywhere/blob/gh-pages/Icon.swift) and customize if needed.
 
 ### Usage
 
 
 1) Create a UIImage to show your icon in a UIImageView (easiest, has sensible defaults to work for most scenarios): 
 ```swift 
+// If only using the JSON file, pass a string with the name of the icon:
 Icon.image(named: "camera", color: .green)
+
+// If using the optional Swift file, you can pass a type-safe IconName instead of a string:
+Icon.image(named: IconName.camera.rawValue, color: .green)
 ```
 
 2) If you need to customize the icon's size and/or positioning, create an Icon object and customize as needed.
 ```swift
-Icon.icon(named: "water", size: 26)?.image(size: CGSize(width: 20, height: 20), color: .blue)
+Icon.icon(named: IconName.camera.rawValue, size: 26)?.image(size: CGSize(width: 20, height: 20), color: .blue)
 ```
 
 ###### Check out the excellent [FontAwesomeKit](https://github.com/PrideChung/FontAwesomeKit#example-usage) library for more details. 

diff --git a/css/style.css b/css/style.css
@@ -18,7 +18,6 @@
   color: #28a745;
 }
 
-
 .nav{
   position: relative;
   display: table;
@@ -41,11 +40,6 @@ hr{
   font-weight: inherit;
 }
 
-a.readme{
-  text-align: center;
-  display: block;
-}
-
 .textarea-wrapper{
   position: relative;
 }

diff --git a/index.html b/index.html
@@ -1,26 +1,26 @@
 <!doctype html>
 <html>
   <head>
-    <!-- Latest compiled and minified CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link rel="stylesheet" href="css/style.css">
     <title>Fort Awesome Everywhere</title>
   </head>
   <body>
-  <a href="https://github.com/knotlabs/fort-awesome-everywhere" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
-
+  <a href="https://github.com/dockwa/fort-awesome-everywhere" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 
     <div class="container">
-      <h1 class="m-1 text-xs-center">Fort Awesome Everywhere</h1>
-      <a class="readme" href="https://github.com/dockwa/fort-awesome-everywhere/blob/gh-pages/README.md">Check out our Readme to see how you can add Fort Awesome Everywhere!</a>
+      <h1 class="m-3 text-center">Fort Awesome Everywhere</h1>
+      <a class="text-center d-block" href="https://github.com/dockwa/fort-awesome-everywhere/blob/gh-pages/README.md">Check out our Readme to see how you can add Fort Awesome Everywhere!</a>
 
       <hr>
 
       <p>
         <ol class="center">
           <li>Download your kit from <a href="https://fortawesome.com">fortawesome.com</a>.</li>
           <li>In the downloaded folder, find the 'css/embedded-woff2.css' file.</li>
-          <li>Drag and drop the file below to export a JSON or XML character mapping for all of the icons.</li>
+          <li>Drag and drop the file below to export the character mapping for all of the icons.</li>
         </ol>
       </p>
       <div id="dropzone">embedded-woff2.css</div>
@@ -30,27 +30,41 @@ <h1 class="m-1 text-xs-center">Fort Awesome Everywhere</h1>
       <div class="row">
         <div class="col-md-6">
           <h3>JSON Export (iOS)</h3>
+          <p class="text-danger">*Required for iOS</p>
           <div class="textarea-wrapper">
-            <textarea id="ios-output" class="form-control" placeholder="Output JSON..." rows="10"></textarea>
+            <pre><textarea id="ios-output" class="form-control" placeholder="Output JSON..." rows="10"></textarea></pre>
             <button class="btn btn-primary" id="download-json">Download</button>
           </div>
           <a class="mt-1 d-block" href="https://github.com/dockwa/fort-awesome-everywhere/blob/gh-pages/README.md#ios">Finish iOS Setup...</a>
         </div>
 
         <div class="col-md-6">
             <h3>XML Export (Android)</h3>
+            <p class="text-danger">*Required for Android</p>
             <div class="textarea-wrapper">
-              <textarea id="android-output" class="form-control" placeholder="Output XML..." rows="10"></textarea>
+              <pre><textarea id="android-output" class="form-control" placeholder="Output XML..." rows="10"></textarea></pre>
               <button class="btn btn-primary" id="download-xml">Download</button>
             </div>
             <a class="mt-1 d-block" href="https://github.com/dockwa/fort-awesome-everywhere/blob/gh-pages/README.md#android">Finish Android Setup...</a>
           </div>
         </div>
+        <hr>
+        <div class="row mt-4">
+          <div class="col-md-8">
+            <h3>Swift Struct Export</h3>
+            <p class="text-secondary">*Optional type-safe icon names for Swift</p>
+            <div class="textarea-wrapper">
+              <pre><textarea id="ios-output-swift" class="form-control" placeholder="Output Swift Struct..." rows="10"></textarea></pre>
+              <button class="btn btn-primary" id="download-swift">Download</button>
+            </div>
+            <a class="mt-1 d-block" href="https://github.com/dockwa/fort-awesome-everywhere/blob/gh-pages/README.md#ios">Finish iOS Setup...</a>
+          </div>
+        </div>
       </div>
 
       <hr>
 
-      <div class="m-b-3 text-xs-center">
+      <div class="m-b-3 text-center mb-3">
         Made as a fun project by <a href="https://github.com/christianhatch">Christian Hatch</a> and <a href="https://github.com/stuyam">Stuart Yamartino</a>
       </div>
 

diff --git a/js/script.js b/js/script.js
@@ -18,6 +18,7 @@ $(function(){
           console.log(event.target);
           getData(event.target.result, exportJSON);
           getData(event.target.result, exportXML);
+          getData(event.target.result, exportSwitStruct);
           this.className = 'success';
           this.innerHTML = 'Success!';
       }.bind(this);
@@ -31,6 +32,10 @@ $(function(){
     downloadJSON();
   });
 
+  $('#download-swift').click(function(){
+    downloadSwift();
+  });
+
   $('#download-xml').click(function(){
     downloadXML();
   });
@@ -67,19 +72,35 @@ var getData = function(data, exportFunction){
 var exportJSON = function(result){
   var json = '{';
   for(var i = 0, l = result.length; i < l; i++){
-    json += '\n"' + result[i][1] + '":"\\u' + result[i][2] + '",'
+    json += '\n  "' + result[i][1] + '":"\\u' + result[i][2] + '",'
   }
   json = json.slice(0, -1); // remove last comma
   json += '\n}';
   $('#ios-output').val(json);
   $('#download-json').show();
 }
 
+var exportSwitStruct = function(result){
+  var swiftStruct = initialSwiftStruct();
+  for(var i = 0, l = result.length; i < l; i++){
+    const iconKey = result[i][1]
+    const swiftName = iconKey.split('-').map((word, index) =>
+      index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)
+    ).join('');
+
+    swiftStruct += '\n' + `    static let ${swiftName} = IconName("${iconKey}")`
+  }
+  swiftStruct += '\n}';
+  swiftStruct += "\n// #---------------- End Auto Generated File - Do Not Modify! ----------------#\n";
+  $('#ios-output-swift').val(swiftStruct);
+  $('#download-swift').show();
+}
+
 var exportXML = function(result){
   // Format: <string name="add_user">&#xf05b;</string>
   var xml = '<?xml version="1.0" encoding="utf-8"?>\n<resources>\n';
   for(var i = 0, l = result.length; i < l; i++){
-    xml += '<string name="' + result[i][1].replace(/-/g, '_') + '">&#x' + result[i][2] + ';</string>\n';
+    xml += '     <string name="' + result[i][1].replace(/-/g, '_') + '">&#x' + result[i][2] + ';</string>\n';
   }
   xml += '</resources>';
   $('#android-output').val(xml);
@@ -90,6 +111,52 @@ var downloadJSON = function(){
   download($('#ios-output').val(), fontName.toLowerCase() + "_icon_map.json", "text/plain");
 }
 
+var downloadSwift = function(){
+  download($('#ios-output-swift').val(), "IconName.swift", "text/plain");
+}
+
 var downloadXML = function(){
   download($('#android-output').val(), "icons.xml", "text/plain");
 }
+
+var initialSwiftStruct = function() {
+  return `// #---------------- Auto Generated File - Do Not Modify! ----------------#
+// ------------------------------------------------------------------------
+// ------------------------------------------------------------------------
+// This file was autogenerated with Fort Awesome Everywhere! It provides
+// type-safe icon name mapping for custom Fort Awesome font icon sets.
+// For more information: https://github.com/dockwa/fort-awesome-everywhere
+// ------------------------------------------------------------------------
+// ------------------------------------------------------------------------
+
+import Foundation
+
+/// A type safe key used to identify Icons.
+///
+/// Allows for defining and accessing icons without bare strings. This will leverage the compiler
+/// to enforce key uniqueness and incorrect use and make it easier to accommodate future UI changes.
+struct IconName: RawRepresentable, Hashable, Equatable {
+
+    typealias RawValue = String
+
+    var rawValue: String
+
+    init?(rawValue: String) {
+        self.rawValue = rawValue
+    }
+
+    init(_ rawValue: String) {
+        self.rawValue = rawValue
+    }
+
+    func hash(into hasher: inout Hasher) {
+        hasher.combine(rawValue)
+    }
+
+    static func < (lhs: Self, rhs: Self) -> Bool {
+        lhs.rawValue == rhs.rawValue
+    }
+}
+
+extension IconName {`
+}