add icon to download button

.vscode/settings.json

@@ -3,6 +3,7 @@
     "devcontainers",
     "doctypes",
     "esbenp",
+    "iconify",
     "rehype",
     "resumarkdown",
     "résumé",

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",

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",

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 {

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;