- Welcome to Next.js! -
+ const [dragState, setDragState] = useState(STATE_NONE) + const [isEnabled, setEnabled] = useState(false); + const [vectorDrawableFile, setVectorDrawableFile] = useState() + const [transformedSvg, setTransformedSvg] = useState() -
- Get started by editing{' '}
- pages/index.js
-
-
-
- )
+ )
}
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
new file mode 100644
index 0000000..8515625
Binary files /dev/null and b/public/android-chrome-192x192.png differ
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
new file mode 100644
index 0000000..4628905
Binary files /dev/null and b/public/android-chrome-512x512.png differ
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..f27db47
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
new file mode 100644
index 0000000..b3930d0
--- /dev/null
+++ b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+
+Documentation →
-Find in-depth information about Next.js features and API.
- + function dragEnter(e) { + e.stopPropagation(); + e.preventDefault(); + setDragState(STATE_DRAGGING) + } - -Learn →
-Learn about Next.js in an interactive course with quizzes!
- + function dragLeave(e) { + e.stopPropagation(); + e.preventDefault(); + setDragState(STATE_DRAG_LEAVE) + } - -Examples →
-Discover and deploy boilerplate example Next.js projects.
- + async function fileDrop(e) { + e.preventDefault(); + e.stopPropagation(); + const files = e.dataTransfer.files; - -Deploy →
-- Instantly deploy your Next.js site to a public URL with Vercel. -
- + if (files.length > 0) { + const file = files[0] + if (isValidFileType(file.type)) { + const xmlContent = await readFileContent(file); + const svgContent = transformXmlOrNull(xmlContent); + if (!svgContent) { + return; + } + + setTransformedSvg(svgContent); + setVectorDrawableFile(file); + setDragState(STATE_DROP); + return; + } + } + + setDragState(STATE_NONE); + } + + function dragOver(e) { + e.preventDefault(); + e.stopPropagation(); + e.dataTransfer.dropEffect = 'copy'; + } + + function clearUpload() { + setDragState(STATE_NONE) + setVectorDrawableFile(null); + setTransformedSvg(null); + } + + function downloadCurrentSvg() { + if (!transformedSvg) { + return; + } + + let filename = 'output.svg'; + if (vectorDrawableFile) { + filename = vectorDrawableFile.name.split('.').slice(0, -1).join('.') + "svg"; + } + + downloadBlob(filename, transformedSvg); + } + + return ( +
+
-
-
-
-
+
VectorDrawable to SVG
+Drop your valid a vector drawable file here.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {vectorDrawableFile?.name}
+