detail page port

components/svg/util/Arrow.vue

@@ -0,0 +1,21 @@
+<template>
+    <svg
+        class="svg-arrow"
+        width="23"
+        height="24"
+        viewBox="0 0 23 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M10.621 22.3448L20.9658 12L10.621 1.65519"
+            stroke="currentColor"
+            stroke-width="2"
+        />
+        <path
+            d="M20.9658 12L0.276165 12"
+            stroke="currentColor"
+            stroke-width="2"
+        />
+    </svg>
+</template>

components/svg/util/Spinner.vue

@@ -0,0 +1,32 @@
+<template>
+    <svg
+        class="svg-util-spinner"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        style="margin: auto; display: block"
+        width="18px"
+        height="18px"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid"
+    >
+        <circle
+            cx="50"
+            cy="50"
+            r="40"
+            stroke-width="4"
+            stroke="currentColor"
+            stroke-dasharray="62 62"
+            fill="none"
+            stroke-linecap="round"
+        >
+            <animateTransform
+                attributeName="transform"
+                type="rotate"
+                repeatCount="indefinite"
+                dur="1s"
+                keyTimes="0;1"
+                values="0 50 50;360 50 50"
+            ></animateTransform>
+        </circle>
+    </svg>
+</template>