From 3173264ec5e4168b17dfb417b85ddcfd4c07fc7c Mon Sep 17 00:00:00 2001
From: Nicola Clark <nicola@slottedspoon.dev>
Date: Wed, 30 Oct 2024 22:19:38 -0500
Subject: [PATCH] add icon to download button

---
 .vscode/settings.json             |  1 +
 package-lock.json                 | 19 +++++++++++++++++++
 package.json                      |  1 +
 src/lib/components/preview.svelte | 18 +++++++++++++++++-
 src/styles.less                   |  1 +
 5 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d9dbde7..c9789f0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,6 +3,7 @@
     "devcontainers",
     "doctypes",
     "esbenp",
+    "iconify",
     "rehype",
     "resumarkdown",
     "résumé",
diff --git a/package-lock.json b/package-lock.json
index 6351185..af016fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "resumarkdown",
       "version": "0.0.1",
       "dependencies": {
+        "iconify-icon": "^2.1.0",
         "rehype-document": "^7.0.3",
         "rehype-sanitize": "^6.0.0",
         "rehype-stringify": "^10.0.1",
@@ -440,6 +441,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -1511,6 +1518,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/iconify-icon": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-2.1.0.tgz",
+      "integrity": "sha512-lto4XU3bwTQnb+D/CsJ4dWAo0aDe+uPMxEtxyOodw9l7R9QnJUUab3GCehlw2M8mDHdeUu/ufx8PvRQiJphhXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
diff --git a/package.json b/package.json
index 4d35916..f61d94a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "iconify-icon": "^2.1.0",
     "rehype-document": "^7.0.3",
     "rehype-sanitize": "^6.0.0",
     "rehype-stringify": "^10.0.1",
diff --git a/src/lib/components/preview.svelte b/src/lib/components/preview.svelte
index fc71a4b..6a091dd 100644
--- a/src/lib/components/preview.svelte
+++ b/src/lib/components/preview.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import 'iconify-icon';
+
   import { pane } from '$lib/stores/nav.js';
   import renderPreview from '$lib/render-preview';
 
@@ -20,7 +22,10 @@
     <p>processing...</p>
   {:then result}
     <iframe title="résumé preview" srcdoc={result}></iframe>
-    <button>download</button>
+    <button>
+      <span>download</span>
+      <iconify-icon icon="ion:download-outline" height="1.25em"></iconify-icon>
+    </button>
   {:catch err}
     <p style:color="red">error: {err}!</p>
   {/await}
@@ -42,6 +47,7 @@
       border: 1px solid @color-dark;
       border-radius: @border-r-xl;
       color: @color-light;
+      font-size: @font-s-sm;
       font-weight: @font-w-semibold;
       padding: @padding-md;
 
@@ -52,6 +58,16 @@
       &:hover {
         background-color: lighten(@color-dark, 15%);
       }
+
+      & > iconify-icon,
+      & > span {
+        vertical-align: middle;
+      }
+
+      iconify-icon {
+        height: 1.25em;
+        width: 1.25em;
+      }
     }
 
     iframe {
diff --git a/src/styles.less b/src/styles.less
index 1fcfd07..abf3f6e 100644
--- a/src/styles.less
+++ b/src/styles.less
@@ -9,6 +9,7 @@
 @fonts-sans: Rubik, Arial, sans-serif;
 @font-s-lg: 2rem;
 @font-s-md: 1.25rem;
+@font-s-sm: 1rem;
 @font-w-bold: 700;
 @font-w-semibold: 600;
 
