feat(app): add swift snippets and fix snippet color state bug

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phosphor-icons/homepage",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "license": "MIT",
   "homepage": "https://phosphoricons.com",
   "author": {

src/components/IconGrid/Panel.tsx

@@ -54,6 +54,7 @@ const RENDERED_SNIPPETS = [
   SnippetType.VUE,
   SnippetType.FLUTTER,
   SnippetType.ELM,
+  SnippetType.SWIFT,
 ];
 
 enum CopyType {
@@ -186,7 +187,7 @@ const Panel = () => {
     );
 
     return [snippets, tabs];
-  }, [entry, weight, size, copied, isDark]);
+  }, [entry, weight, size, color, copied, isDark]);
 
   useHotkeys("esc", () => setSelectionEntry(null));
 

src/lib/index.ts

@@ -11,4 +11,5 @@ export enum SnippetType {
   HTML = "Web",
   FLUTTER = "Flutter",
   ELM = "Elm",
+  SWIFT = "Swift",
 }

src/utils/index.ts

@@ -1,7 +1,15 @@
 import { IconStyle } from "@phosphor-icons/core";
+import TinyColor from "tinycolor2";
 
 import { SnippetType } from "@/lib";
 
+function u8ToCGFloatStr(value: number): string {
+  return (value / 255).toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 4,
+  });
+}
+
 export function getCodeSnippets({
   name,
   displayName,
@@ -17,8 +25,9 @@ export function getCodeSnippets({
 }): Record<SnippetType, string> {
   const isDefaultWeight = weight === "regular";
   const isDefaultColor = color === "#000000";
-  const elmName = displayName.replace(/^\w/, (c) => c.toLowerCase());
+  const camelName = displayName.replace(/^\w/, (c) => c.toLowerCase());
-  const elmWeight = weight.replace(/^\w/, (c) => c.toUpperCase());
+  const pascalWeight = weight.replace(/^\w/, (c) => c.toUpperCase());
+  const { r, g, b } = TinyColor(color).toRgb();
 
   return {
     [SnippetType.HTML]: `<i class="ph${
@@ -40,12 +49,21 @@ export function getCodeSnippets({
     },\n  size: ${size.toFixed(1)},\n${
       !isDefaultColor ? `  color: Color(0xff${color.replace("#", "")}),\n` : ""
     })`,
-    [SnippetType.ELM]: `Phosphor.${elmName}${
+    [SnippetType.ELM]: `Phosphor.${camelName}${
-      isDefaultWeight ? "" : " " + elmWeight
+      isDefaultWeight ? "" : " " + pascalWeight
     }
     |> withSize ${size}
     |> withSizeUnit "px"
     |> toHtml []`,
+    [SnippetType.SWIFT]: `Ph.${camelName}.${weight}${
+      !isDefaultColor
+        ? `\n    .color(red: ${u8ToCGFloatStr(r)}, green: ${u8ToCGFloatStr(
+            g
+          )}, blue: ${u8ToCGFloatStr(b)})`
+        : ""
+    }
+    .frame(width: ${size}, height: ${size})
+    `,
   };
 }