From ccf1160dec3d42d52815638988817095756d9477 Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Sun, 7 May 2023 13:05:10 +0200
Subject: [PATCH] Add download options

---
 .../theme/components/icons/CopySVGButton.vue  | 39 ++++++++++++++++---
 .../theme/components/icons/IconInfo.vue       |  2 +-
 docs/icons/[name].md                          |  1 +
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/docs/.vitepress/theme/components/icons/CopySVGButton.vue b/docs/.vitepress/theme/components/icons/CopySVGButton.vue
index f8ef25a91..e619bcf66 100644
--- a/docs/.vitepress/theme/components/icons/CopySVGButton.vue
+++ b/docs/.vitepress/theme/components/icons/CopySVGButton.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import ButtonMenu from '../base/ButtonMenu.vue'
+import { useIconStyleContext } from '../../composables/useIconStyle';
 
 const allowedAttrs = [
   'xmlns',
@@ -15,6 +16,12 @@ const allowedAttrs = [
   'class',
 ]
 
+const props = defineProps<{
+  name: string
+}>()
+
+const { size } = useIconStyleContext()
+
 const animate = ref(false)
 
 function getSVGIcon() {
@@ -49,12 +56,33 @@ function copyDataUrl() {
   navigator.clipboard.writeText(dataUrl)
 }
 
-function copyPNG() {
+function downloadSVG() {
   const svgString = getSVGIcon()
 
-  // Create SVG data url
-  const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`
-  navigator.clipboard.writeText(dataUrl)
+  const link = document.createElement('a');
+  link.download = `${props.name}.svg`;
+  link.href = `data:image/svg+xml;base64,${btoa(svgString)}`
+  link.click();
+}
+
+function downloadPNG() {
+  const svgString = getSVGIcon()
+
+  const canvas = document.createElement('canvas');
+  canvas.width = size.value;
+  canvas.height = size.value;
+  const ctx = canvas.getContext("2d");
+
+  const image = new Image();
+  image.src = `data:image/svg+xml;base64,${btoa(svgString)}`;
+  image.onload = function() {
+    ctx.drawImage(image, 0, 0);
+
+    const link = document.createElement('a');
+    link.download = `${props.name}.png`;
+    link.href = canvas.toDataURL('image/png')
+    link.click();
+  }
 }
 
 function confetti(e) {
@@ -75,7 +103,8 @@ function confetti(e) {
     :options="[
       { text: 'Copy SVG' , onClick: copySVG },
       { text: 'Copy Data URL' , onClick: copyDataUrl },
-      // { text: 'Copy PNG' , onClick: () => {} },
+      { text: 'Download SVG' , onClick: downloadSVG },
+      { text: 'Download PNG' , onClick: downloadPNG },
     ]"
   />
 </template>
diff --git a/docs/.vitepress/theme/components/icons/IconInfo.vue b/docs/.vitepress/theme/components/icons/IconInfo.vue
index 8e83c79c2..ba928f3d1 100644
--- a/docs/.vitepress/theme/components/icons/IconInfo.vue
+++ b/docs/.vitepress/theme/components/icons/IconInfo.vue
@@ -37,7 +37,7 @@ const { page } = useData()
         text="See in action"
         @click="go(`/icons/${icon.name}`)"
       />
-      <CopySVGButton />
+      <CopySVGButton :name="icon.name" />
       <CopyCodeButton :name="icon.name"/>
     </div>
 
diff --git a/docs/icons/[name].md b/docs/icons/[name].md
index 4b20dc330..d463b04bf 100644
--- a/docs/icons/[name].md
+++ b/docs/icons/[name].md
@@ -35,6 +35,7 @@ const codeExample = computed(() => data.codeExamples?.map(
 <div :class="$style.layout">
   <div>
     <IconPreview
+      id="previewer"
       :name="$params.name"
       :iconNode="$params.iconNode"
       :class="$style.preview"