Uses compiled assets instead of named system images, adds image docum…

…entation to README

Etymo/Assets.xcassets/Symbols/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Etymo/Assets.xcassets/Symbols/text.page.badge.magnifyingglass.symbolset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "symbols" : [
+    {
+      "filename" : "text.page.badge.magnifyingglass.svg",
+      "idiom" : "universal"
+    }
+  ]
+}

Etymo/Assets.xcassets/Symbols/wifi.slash.symbolset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "symbols" : [
+    {
+      "filename" : "wifi.slash.svg",
+      "idiom" : "universal"
+    }
+  ]
+}

Etymo/ContentUnavailableView.swift

@@ -28,7 +28,7 @@ struct ContentUnavailableView: View {
 
 #Preview {
     ContentUnavailableView(
-        image: Image(systemName: "wifi.slash"),
+        image: Image(.wifiSlash),
         title: "Not Connected",
         description: "Unable to lookup words while offline.\nCheck your Internet connection."
     )

Etymo/ContentView.swift

@@ -27,7 +27,6 @@ struct ContentView: View {
                     .frame(width: geometry.size.width)
                     .frame(minHeight: geometry.size.height)
                 }
-
                 .navigationTitle("Etymo")
                 .searchable(text: $viewModel.searchText, prompt: "Word")
             }
@@ -44,7 +43,7 @@ struct ContentView: View {
 
     var emptySearchView: some View {
         ContentUnavailableView(
-            image: Image(systemName: "text.page.badge.magnifyingglass"),
+            image: Image(.textPageBadgeMagnifyingglass),
             title: "Enter a Word",
             description: "Type a word into the search to see its definitions."
         )
@@ -53,7 +52,7 @@ struct ContentView: View {
 
     var noResultsView: some View {
         ContentUnavailableView(
-            image: Image(systemName: "text.page.badge.magnifyingglass"),
+            image: Image(.textPageBadgeMagnifyingglass),
             title: "No Results",
             description: "Check the spelling or try a new search."
         )
@@ -62,7 +61,7 @@ struct ContentView: View {
 
     var notConnectedView: some View {
         ContentUnavailableView(
-            image: Image(systemName: "wifi.slash"),
+            image: Image(.wifiSlash),
             title: "Not Connected",
             description: "Unable to lookup words while offline.\nCheck your Internet connection."
         )

README.md

@@ -6,6 +6,20 @@ Explore words like never before with definitions, origins, usage, and more in on
 
 Open `Etymo.xcodeproj` and build/run the project.
 
+### Images
+
+Convert all icons to [symbols](https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app) and store them in `Assets.xcassets/Symbols`. Export symbols from [SF Symbols](https://developer.apple.com/sf-symbols/) or use [SF Symbol Creator](https://www.figma.com/community/plugin/1207724751253683840) to export custom icons from Figma.
+
+Use compiled assets instead of string named images:
+
+```
+// Incorrect
+Image("star")
+
+// Correct
+Image(.star)
+```
+
 ### Device Support
 
 Support is provided for the most current version and the previous version of iOS and iPadOS, as well as for earlier versions until their usage falls below 10%. For the latest statistics, see [iOS and iPadOS Usage](https://developer.apple.com/support/app-store/).