doc: Update document.

jaywcjlove · Apr 7, 2024 · f554de3 · f554de3
1 parent 79683d7
commit f554de3
Show file tree

Hide file tree

Showing 2 changed files with 197 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 	<img src="./assets/logo.png" alt="Create Custom Symbols LOGO" width="160" height="160">
   <p>
 		<a href="./README.zh.md">中文</a> • 
-    <a href="https://apps.apple.com/app/create-custom-symbols/id6476924627">AppStore</a> • 
+    <a href="#frequently-asked-questions">FAQ</a> • 
 		<a href="https://wangchujiang.com/#/contact">Contact & Support</a>
   </p>
 	<h1>Create Custom Symbols</h1>
@@ -14,7 +14,7 @@
   </p>
 </div>
 
-A tool that can convert any SVG icon into a custom SF symbol. Your customized SF symbol can be imported into Xcode and utilized in any project based on UIKit or SwiftUI.
+A tool that can convert any SVG icon into a [custom SF symbol](https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app). Your customized SF symbol can be imported into Xcode and utilized in any project based on UIKit or SwiftUI.
 
 ![RegexMate screenshots-1](./assets/screenshots-1.png)
 
@@ -24,4 +24,99 @@ Effortlessly convert any SVG icon into an SF symbol file usable in Xcode by simp
 
 Support batch import of SVG icons and batch generation of SF symbol icons.
 
-![RegexMate screenshots-3](./assets/screenshots-3.png)
+![RegexMate screenshots-3](./assets/screenshots-3.png)
+
+## Frequently Asked Questions
+
+#### How to Use Your Custom SF Symbol in SwiftUI?
+
+```swift
+// Your custom symbol at Medium scale, Regular weight
+Image("myCustomSymbolName")
+
+// Your custom symbol at large scale, 21pt font and Heavy weight
+Image("myCustomSymbolName")
+    .imageScale(.large)
+    .font(Font.system(size: 21, weight: .heavy))
+```
+
+You can also display custom symbols alongside some text.
+
+```swift
+VStack {
+    (Text("Some Text ")
+        + Text(Image("myCustomSymbolName"))
+        + Text(" more text")).imageScale(.large)
+}
+```
+
+#### How to Use Your Custom SF Symbol in UIKit?
+
+```swift
+let customSymbol:UIImage? = UIImage(named: "MyCustomSymbolName")?
+    .applyingSymbolConfiguration(
+        UIImage.SymbolConfiguration(
+            pointSize: 17,
+            weight: .semibold,
+            scale: .large
+        )
+    )
+```
+
+#### How to Use Your Custom SF Symbol in AppKit?
+
+```swift
+let customSymbol:NSImage? = NSImage(named: "MyCustomSymbolName")?
+    .withSymbolConfiguration(
+        NSImage.SymbolConfiguration(
+            pointSize: 24,
+            weight: .bold,
+            scale: .large
+        )
+    )
+```
+
+Apply a specific appearance to a symbol image
+
+```swift
+var configuration = NSImage.SymbolConfiguration(paletteColors: [.systemTeal, .systemGray])
+configuration = config.applying(.init(textStyle: .title1))
+imageView.symbolConfiguration = config
+```
+
+#### How to Use Your Custom SF Symbol in UIKit?
+
+```swift
+// Create a system symbol image.
+let image = UIImage(systemName: "multiply.circle.fill")                  
+
+// Create a custom symbol image using an asset in an asset catalog in Xcode.
+let image = UIImage(named: "custom.multiply.circle")
+```
+#### How to define colorful SF symbols?
+
+Currently not supported, according to the [official documentation](https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app), manually adding styles, still trying to support it in the future.
+
+```html
+<style>
+  .multicolor-0:systemBlueColor { fill:#007AFF; opacity:1.0 }
+  .multicolor-1:white { fill:#FFFFFF; opacity:1.0 }
+  .multicolor-2:tintColor { fill:#007AFF; opacity:1.0 }
+  .hierarchical-0:tertiary { fill:#8E8E8E }
+  .hierarchical-1:primary { fill:#212121 }
+</style>
+
+<g id="Symbols">
+  <!-- A variant containing three shapes with multicolor and hierarchical annotations. -->
+  <g id="Regular-M" transform="matrix(1 0 0 1 2853.78 1556)">
+      <!-- The shape is in the first multicolor layer, whose fill color is systemBlueColor. It’s also in the first layer for hierarchical rendering, and the level is primary. -->
+      <path class="multicolor-0:systemBlueColor hierarchical-1:primary" d="...">
+
+      <!-- Two additional shapes. -->
+      <path class="multicolor-1:white hierarchical-1:primary" d="...">
+      <path class="multicolor-2:tintColor hierarchical-0:tertiary" d="...">
+    </g>
+</g>
+```
+
+### [More FAQs…](https://github.com/jaywcjlove/create-custom-symbols/issues)
diff --git a/README.zh.md b/README.zh.md
@@ -4,7 +4,7 @@
 	<img src="./assets/logo.png" alt="Create Custom Symbols LOGO" width="160" height="160">
   <p>
 		<a href="./README.md">English</a> • 
-    <a target="_blank" href="https://apps.apple.com/app/create-custom-symbols/id6476924627">AppStore</a> • 
+    <a href="#常见问题">常见问题</a> • 
 		<a target="_blank" href="https://wangchujiang.com/#/contact">联系&支持</a>
   </p>
 	<h1>Create Custom Symbols</h1>
@@ -14,7 +14,7 @@
   </p>
 </div>
 
-一个工具，能够将任意 SVG 图标转换为自定义的 SF 符号。您可以将定制的 SF 符号导入 Xcode，并在任何基于 UIKit 或 SwiftUI 的项目中使用。
+一个工具，能够将任意 SVG 图标转换为[自定义的 SF 符号](https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app)。您可以将定制的 SF 符号导入 Xcode，并在任何基于 UIKit 或 SwiftUI 的项目中使用。
 
 ![RegexMate screenshots-1-cn](./assets/screenshots-1-cn.png)
 
@@ -24,4 +24,100 @@
 
 支持批量导入 SVG 图标，并批量生成 SF 符号图标
 
-![RegexMate screenshots-3-cn](./assets/screenshots-3-cn.png)
+![RegexMate screenshots-3-cn](./assets/screenshots-3-cn.png)
+
+### 常见问题
+
+#### 如何在 SwiftUI 中使用您的自定义 SF 符号？
+
+```swift
+// Your custom symbol at Medium scale, Regular weight
+Image("myCustomSymbolName")
+
+// Your custom symbol at large scale, 21pt font and Heavy weight
+Image("myCustomSymbolName")
+    .imageScale(.large)
+    .font(Font.system(size: 21, weight: .heavy))
+```
+
+您还可以在一些文本旁边显示自定义符号。
+
+```swift
+VStack {
+    (Text("Some Text ")
+        + Text(Image("myCustomSymbolName"))
+        + Text(" more text")).imageScale(.large)
+}
+```
+
+#### 如何在 UIKit 中使用您的自定义 SF 符号？
+
+```swift
+let customSymbol:UIImage? = UIImage(named: "MyCustomSymbolName")?
+    .applyingSymbolConfiguration(
+        UIImage.SymbolConfiguration(
+            pointSize: 17,
+            weight: .semibold,
+            scale: .large
+        )
+    )
+```
+
+#### 如何在 AppKit 中使用您的自定义 SF 符号？
+
+```swift
+let customSymbol:NSImage? = NSImage(named: "MyCustomSymbolName")?
+    .withSymbolConfiguration(
+        NSImage.SymbolConfiguration(
+            pointSize: 24,
+            weight: .bold,
+            scale: .large
+        )
+    )
+```
+
+为符号图像应用特定外观
+
+```swift
+var configuration = NSImage.SymbolConfiguration(paletteColors: [.systemTeal, .systemGray])
+configuration = config.applying(.init(textStyle: .title1))
+imageView.symbolConfiguration = config
+```
+
+#### 如何在 UIKit 中使用您的自定义 SF 符号？
+
+```swift
+// Create a system symbol image.
+let image = UIImage(systemName: "multiply.circle.fill")                  
+
+// Create a custom symbol image using an asset in an asset catalog in Xcode.
+let image = UIImage(named: "custom.multiply.circle")
+```
+
+#### 如何定义多彩 SF 符号？
+
+目前暂时不支持，根据[官方文档](https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app)手动去添加样式，仍然在未来尝试支持它
+
+```html
+<style>
+  .multicolor-0:systemBlueColor { fill:#007AFF; opacity:1.0 }
+  .multicolor-1:white { fill:#FFFFFF; opacity:1.0 }
+  .multicolor-2:tintColor { fill:#007AFF; opacity:1.0 }
+  .hierarchical-0:tertiary { fill:#8E8E8E }
+  .hierarchical-1:primary { fill:#212121 }
+</style>
+
+<g id="Symbols">
+  <!-- 包含三种形状的变体，具有多色和分层注释。 -->
+  <g id="Regular-M" transform="matrix(1 0 0 1 2853.78 1556)">
+      <!-- 形状位于第一个多色图层中，其填充颜色为 systemBlueColor。它也位于分层渲染的第一个图层中，层级为一级。-->
+      <path class="multicolor-0:systemBlueColor hierarchical-1:primary" d="...">
+
+      <!-- 两个额外的形状。 -->
+      <path class="multicolor-1:white hierarchical-1:primary" d="...">
+      <path class="multicolor-2:tintColor hierarchical-0:tertiary" d="...">
+    </g>
+</g>
+```
+
+### [More FAQs…](https://github.com/jaywcjlove/create-custom-symbols/issues)