abstracts svgs, fiddling with prompt templates idea

src/components/svg/CautionIcon.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export default function CautionIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-6 w-6"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line
+        x1="12"
+        y1="9"
+        x2="12"
+        y2="13"
+      />
+      <line
+        x1="12"
+        y1="17"
+        x2="12.01"
+        y2="17"
+      />
+    </svg>
+  );
+}

src/components/svg/ChatIcon.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export default function ChatIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="m-auto h-6 w-6"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+      ></path>
+    </svg>
+  );
+}

src/components/svg/LightningIcon.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default function LightningIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      aria-hidden="true"
+      className="h-6 w-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
+      />
+    </svg>
+  );
+}

src/components/svg/SunIcon.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+export default function SunIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-6 w-6"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="5"
+      />
+      <line
+        x1="12"
+        y1="1"
+        x2="12"
+        y2="3"
+      />
+      <line
+        x1="12"
+        y1="21"
+        x2="12"
+        y2="23"
+      />
+      <line
+        x1="4.22"
+        y1="4.22"
+        x2="5.64"
+        y2="5.64"
+      />
+      <line
+        x1="18.36"
+        y1="18.36"
+        x2="19.78"
+        y2="19.78"
+      />
+      <line
+        x1="1"
+        y1="12"
+        x2="3"
+        y2="12"
+      />
+      <line
+        x1="21"
+        y1="12"
+        x2="23"
+        y2="12"
+      />
+      <line
+        x1="4.22"
+        y1="19.78"
+        x2="5.64"
+        y2="18.36"
+      />
+      <line
+        x1="18.36"
+        y1="5.64"
+        x2="19.78"
+        y2="4.22"
+      />
+    </svg>
+  );
+}

src/components/svg/UserIcon.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default function UserIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+      <circle
+        cx="12"
+        cy="7"
+        r="4"
+      />
+    </svg>
+  );
+}