big ui refractor

client/src/components/kanji/KanjiSvgViewer.vue

@@ -58,6 +58,7 @@ const props = defineProps({
     default: 'animate',
     validator: (v) => ['hero', 'animate'].includes(v),
   },
+  svgContent: { type: String, default: '' },
 });
 
 const strokes = ref([]);
@@ -72,10 +73,14 @@ async function loadData(char) {
   const hex = char.charCodeAt(0).toString(16).padStart(5, '0');
 
   try {
-    const baseUrl = 'https://raw.githubusercontent.com/KanjiVG/kanjivg/master/kanji';
-    const res = await fetch(`${baseUrl}/${hex}.svg`);
+    let txt = props.svgContent;
+
+    if (!txt) {
+      const baseUrl = 'https://raw.githubusercontent.com/KanjiVG/kanjivg/master/kanji';
+      const res = await fetch(`${baseUrl}/${hex}.svg`);
+      txt = await res.text();
+    }
 
-    const txt = await res.text();
     const parser = new DOMParser();
     const doc = parser.parseFromString(txt, 'image/svg+xml');
     const rawPaths = Array.from(doc.getElementsByTagName('path')).map((p) => p.getAttribute('d'));
@@ -147,5 +152,3 @@ defineExpose({ playAnimation });
 onMounted(() => { if (props.char) loadData(props.char); });
 watch(() => props.char, (n) => { if (n) loadData(n); });
 </script>
-
-<style lang="scss" src="@/styles/components/_kanji.scss" scoped></style>