From 64721f261c61f10ada0edc4dc8403d07ff8d95d7 Mon Sep 17 00:00:00 2001 From: Christian Hatch Date: Fri, 26 Jan 2024 16:48:49 -0500 Subject: [PATCH] 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 --- README.md | 11 +++++--- css/style.css | 6 ----- index.html | 34 ++++++++++++++++-------- js/script.js | 71 +++++++++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 100 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index e7ae463..95af27e 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ 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: @@ -40,20 +40,23 @@ One of the biggest challenges to using custom Fort Awesome icon sets is mapping '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 index 62158a8..9771670 100644 --- 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 index 6fd77d0..5d09a45 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,18 @@ - - + + + Fort Awesome Everywhere - - +
-

Fort Awesome Everywhere

- Check out our Readme to see how you can add Fort Awesome Everywhere! +

Fort Awesome Everywhere

+ Check out our Readme to see how you can add Fort Awesome Everywhere!
@@ -20,7 +20,7 @@

Fort Awesome Everywhere

  1. Download your kit from fortawesome.com.
  2. In the downloaded folder, find the 'css/embedded-woff2.css' file.
    3. -
  3. Drag and drop the file below to export a JSON or XML character mapping for all of the icons.
    4. +
  4. Drag and drop the file below to export the character mapping for all of the icons.

embedded-woff2.css
@@ -30,8 +30,9 @@

Fort Awesome Everywhere

JSON Export (iOS)

+

*Required for iOS

- +
Finish iOS Setup... @@ -39,18 +40,31 @@

JSON Export (iOS)

XML Export (Android)

+

*Required for Android

- +
Finish Android Setup...
+
+
+
+

Swift Struct Export

+

*Optional type-safe icon names for Swift

+
+
+ +
+ Finish iOS Setup... +
+
-
+
Made as a fun project by Christian Hatch and Stuart Yamartino
diff --git a/js/script.js b/js/script.js index 9602204..a51bb91 100644 --- 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,7 +72,7 @@ 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}'; @@ -75,11 +80,27 @@ var exportJSON = function(result){ $('#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: var xml = '\n\n'; for(var i = 0, l = result.length; i < l; i++){ - xml += '&#x' + result[i][2] + ';\n'; + xml += ' &#x' + result[i][2] + ';\n'; } xml += ''; $('#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 {` +} \ No newline at end of file