Working on prose icon

app/components/content/ProseIcon.vue

@@ -4,6 +4,10 @@ defineProps({
     type: String,
     required: true,
   },
+  color: {
+    type: String,
+    default: 'gray',
+  },
 })
 </script>
 
@@ -11,9 +15,12 @@ defineProps({
   <span class="inline-flex items-center">
     <UIcon
       class="mb-1 mr-1"
-      :name="icon"
+      :name="`i-logos:${icon}`"
     />
-    <span class="sofia font-medium underline-offset-2 underline decoration-neutral-300 dark:decoration-neutral-700">
+    <span
+      :class="`text-${color}-500 decoration-${color}-300`"
+      class="sofia font-medium underline-offset-2 underline"
+    >
       <slot />
     </span>
   </span>