Use OpenAI SDK icons for app controls

mobius.json

@@ -25,7 +25,8 @@
       "react",
       "react-dom",
       "marked",
-      "dompurify"
+      "dompurify",
+      "@openai/apps-sdk-ui/components/Icon"
     ],
     "esm_deps": []
   },

ui/Icons.jsx

@@ -1,18 +1,34 @@
 import React from 'react'
+import {
+  ArrowRotateCw,
+  ArrowUp,
+  Chat,
+  ChevronDown,
+  ChevronRight,
+  SettingsCog,
+  Trash,
+} from '@openai/apps-sdk-ui/components/Icon'
+
+const SDK_ICONS = {
+  send: ArrowUp,
+  feedback: Chat,
+  trash: Trash,
+  settings: SettingsCog,
+  refresh: ArrowRotateCw,
+  chevron: ChevronDown,
+  right: ChevronRight,
+}
 
 const PATHS = {
-  send: <><path d="M12 19V5" /><path d="m6.5 10.5 5.5-5.5 5.5 5.5" /></>,
   merge: <><circle cx="7" cy="5" r="2" /><circle cx="17" cy="19" r="2" /><path d="M7 7v5a7 7 0 0 0 7 7h1" /><path d="M17 17V9a4 4 0 0 0-4-4H9" /></>,
-  feedback: <><path d="M5 17.5 3.5 21l3.8-1.7A9 9 0 1 0 5 17.5Z" /><path d="M8 12h8" /><path d="M8 8.5h5" /></>,
-  trash: <><path d="M4 7h16" /><path d="M9 7V4h6v3" /><path d="m7 7 1 13h8l1-13" /></>,
-  settings: <><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1a1.7 1.7 0 0 0 1.9.3A1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" /></>,
   github: <path d="M12 2.8a9.2 9.2 0 0 0-2.9 17.9c.5.1.6-.2.6-.5v-1.8c-2.8.6-3.4-1.2-3.4-1.2-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 0 1.6 1.1 1.6 1.1.9 1.6 2.4 1.1 2.9.8.1-.7.4-1.1.7-1.4-2.2-.3-4.6-1.1-4.6-4.9 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.8 1a9.5 9.5 0 0 1 5 0c1.9-1.3 2.8-1 2.8-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.8-2.3 4.6-4.6 4.9.4.3.7 1 .7 1.9v2.7c0 .4.2.6.7.5A9.2 9.2 0 0 0 12 2.8Z" />,
-  refresh: <><path d="M20 11a8 8 0 0 0-14.7-4.3L3 10" /><path d="M3 4v6h6" /><path d="M4 13a8 8 0 0 0 14.7 4.3L21 14" /><path d="M21 20v-6h-6" /></>,
-  chevron: <path d="m8 10 4 4 4-4" />,
-  right: <path d="m9 18 6-6-6-6" />,
 }
 
-export function Icon({ name, size = 18 }) {
+export function Icon({ name, size = 18, ...props }) {
+  const SdkIcon = SDK_ICONS[name]
+  if (SdkIcon) {
+    return <SdkIcon width={size} height={size} className="co-icon" aria-hidden="true" {...props} />
+  }
   return (
     <svg
       className="co-icon"
@@ -25,6 +41,7 @@ export function Icon({ name, size = 18 }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
+      {...props}
     >
       {PATHS[name] || null}
     </svg>