[Feature Request] Add SVG export Function #172

.gitignore

@@ -20,3 +20,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json

src/pages/index.js

@@ -1,7 +1,8 @@
-import { TbBrandTwitter, TbShare, TbDownload, TbCopy } from "react-icons/tb";
-import React, { useRef, useState, useEffect } from "react";
+import { TbBrandTwitter, TbShare, TbDownload, TbCopy, TbChevronDown } from "react-icons/tb";
+import React, { useRef, useState, useEffect, useCallback } from "react";
 import {
   download,
+  downloadSVG,
   fetchData,
   downloadJSON,
   cleanUsername,
@@ -19,6 +20,8 @@ const App = () => {
   const [theme, setTheme] = useState("standard");
   const [data, setData] = useState(null);
   const [error, setError] = useState(null);
+  const [showDownloadMenu, setShowDownloadMenu] = useState(false);
+  const downloadMenuRef = useRef();
 
   useEffect(() => {
     if (!data) {
@@ -27,6 +30,17 @@ const App = () => {
     draw();
   }, [data, theme]);
 
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handler = (e) => {
+      if (downloadMenuRef.current && !downloadMenuRef.current.contains(e.target)) {
+        setShowDownloadMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
   const handleSubmit = (e) => {
     e.preventDefault();
 
@@ -62,6 +76,18 @@ const App = () => {
     copyToClipboard(canvasRef.current);
   };
 
+  const onDownloadSVG = (e) => {
+    e.preventDefault();
+    if (data != null) {
+      downloadSVG(
+        data,
+        username,
+        theme,
+        "Made by @sallar & friends - github-contributions.vercel.app"
+      );
+    }
+  };
+
   const onDownloadJson = (e) => {
     e.preventDefault();
     if (data != null) {
@@ -139,14 +165,35 @@ const App = () => {
                 <TbCopy size={18} />
                 Copy
               </button>
-              <button
-                className="App-download-button"
-                onClick={onDownload}
-                type="button"
-              >
-                <TbDownload size={18} />
-                Download
-              </button>
+              <div className="App-download-dropdown" ref={downloadMenuRef}>
+                <button
+                  className="App-download-button"
+                  onClick={() => setShowDownloadMenu((v) => !v)}
+                  type="button"
+                >
+                  <TbDownload size={18} />
+                  Download
+                  <TbChevronDown size={14} style={{ marginLeft: 2 }} />
+                </button>
+                {showDownloadMenu && (
+                  <div className="App-download-menu">
+                    <button
+                      className="App-download-menu-item"
+                      onClick={(e) => { onDownload(e); setShowDownloadMenu(false); }}
+                      type="button"
+                    >
+                      <TbDownload size={15} /> PNG
+                    </button>
+                    <button
+                      className="App-download-menu-item"
+                      onClick={(e) => { onDownloadSVG(e); setShowDownloadMenu(false); }}
+                      type="button"
+                    >
+                      <TbDownload size={15} /> SVG
+                    </button>
+                  </div>
+                )}
+              </div>
               {global.navigator && "share" in navigator && (
                 <button
                   className="App-download-button"

src/styles/App.css

@@ -183,6 +183,48 @@ form button {
   gap: 7px;
 }
 
+.App-download-dropdown {
+  position: relative;
+  display: inline-flex;
+}
+
+.App-download-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--bg);
+  border: 1px solid var(--input-border);
+  border-radius: 0.4rem;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  min-width: 110px;
+  z-index: 100;
+  overflow: hidden;
+}
+
+.App-download-menu-item {
+  height: 2.6rem;
+  line-height: 2.6rem;
+  padding: 0 1rem;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: var(--text);
+  font-size: 0.85em;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  transition: background 0.15s ease;
+}
+
+.App-download-menu-item:hover {
+  background-color: var(--button-bg);
+  color: var(--button-text);
+}
+
 .App-themes label {
   display: flex;
   justify-content: flex-start;