add icons

package-lock.json

@@ -1,14 +1,15 @@
 {
     "name": "spacesocial-client",
-    "version": "0.2.0_rev2",
+    "version": "0.2.0_rev3",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "spacesocial-client",
-            "version": "0.2.0_rev2",
+            "version": "0.2.0_rev3",
             "license": "GPL-3.0",
             "devDependencies": {
+                "@poppanator/sveltekit-svg": "^4.2.1",
                 "@sveltejs/adapter-auto": "^3.2.2",
                 "@sveltejs/adapter-static": "^3.0.2",
                 "@sveltejs/kit": "^2.5.17",
@@ -482,6 +483,48 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@poppanator/sveltekit-svg": {
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/@poppanator/sveltekit-svg/-/sveltekit-svg-4.2.1.tgz",
+            "integrity": "sha512-w7jl4EVOOF+X+uv2BEUiMDJwds+GfbczwGpcS0+rsjIsKYmqmwMi4ts3bVZR9ZvdFHWy5rS84U+pSBClz6cbBg==",
+            "dev": true,
+            "dependencies": {
+                "@rollup/pluginutils": "^5.1.0"
+            },
+            "peerDependencies": {
+                "svelte": ">=4.x",
+                "svgo": ">=3.x",
+                "vite": ">=4.x"
+            }
+        },
+        "node_modules/@rollup/pluginutils": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
+            "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+            "dev": true,
+            "dependencies": {
+                "@types/estree": "^1.0.0",
+                "estree-walker": "^2.0.2",
+                "picomatch": "^2.3.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@rollup/pluginutils/node_modules/estree-walker": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+            "dev": true
+        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.18.0",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
@@ -803,6 +846,16 @@
                 "vite": "^5.0.0"
             }
         },
+        "node_modules/@trysound/sax": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+            "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+            "dev": true,
+            "peer": true,
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
         "node_modules/@types/cookie": {
             "version": "0.6.0",
             "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -850,6 +903,13 @@
                 "dequal": "^2.0.3"
             }
         },
+        "node_modules/boolbase": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+            "dev": true,
+            "peer": true
+        },
         "node_modules/code-red": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
@@ -864,6 +924,16 @@
                 "periscopic": "^3.1.0"
             }
         },
+        "node_modules/commander": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+            "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+            "dev": true,
+            "peer": true,
+            "engines": {
+                "node": ">= 10"
+            }
+        },
         "node_modules/cookie": {
             "version": "0.6.0",
             "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
@@ -874,6 +944,23 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/css-select": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+            "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "boolbase": "^1.0.0",
+                "css-what": "^6.1.0",
+                "domhandler": "^5.0.2",
+                "domutils": "^3.0.1",
+                "nth-check": "^2.0.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
         "node_modules/css-tree": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
@@ -888,6 +975,55 @@
                 "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
             }
         },
+        "node_modules/css-what": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+            "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+            "dev": true,
+            "peer": true,
+            "engines": {
+                "node": ">= 6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
+        "node_modules/csso": {
+            "version": "5.0.5",
+            "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+            "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "css-tree": "~2.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
+            }
+        },
+        "node_modules/csso/node_modules/css-tree": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+            "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "mdn-data": "2.0.28",
+                "source-map-js": "^1.0.1"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
+            }
+        },
+        "node_modules/csso/node_modules/mdn-data": {
+            "version": "2.0.28",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+            "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+            "dev": true,
+            "peer": true
+        },
         "node_modules/debug": {
             "version": "4.3.5",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
@@ -933,6 +1069,78 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/dom-serializer": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+            "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.2",
+                "entities": "^4.2.0"
+            },
+            "funding": {
+                "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+            }
+        },
+        "node_modules/domelementtype": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+            "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fb55"
+                }
+            ],
+            "peer": true
+        },
+        "node_modules/domhandler": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+            "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "domelementtype": "^2.3.0"
+            },
+            "engines": {
+                "node": ">= 4"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domhandler?sponsor=1"
+            }
+        },
+        "node_modules/domutils": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+            "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "dom-serializer": "^2.0.0",
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domutils?sponsor=1"
+            }
+        },
+        "node_modules/entities": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "dev": true,
+            "peer": true,
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
         "node_modules/esbuild": {
             "version": "0.21.5",
             "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -1119,6 +1327,19 @@
                 "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
             }
         },
+        "node_modules/nth-check": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+            "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "boolbase": "^1.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/nth-check?sponsor=1"
+            }
+        },
         "node_modules/periscopic": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -1138,6 +1359,18 @@
             "dev": true,
             "license": "ISC"
         },
+        "node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "dev": true,
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
         "node_modules/postcss": {
             "version": "8.4.38",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
@@ -1287,6 +1520,32 @@
                 "svelte": "^3.19.0 || ^4.0.0"
             }
         },
+        "node_modules/svgo": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+            "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+            "dev": true,
+            "peer": true,
+            "dependencies": {
+                "@trysound/sax": "0.2.0",
+                "commander": "^7.2.0",
+                "css-select": "^5.1.0",
+                "css-tree": "^2.3.1",
+                "css-what": "^6.1.0",
+                "csso": "^5.0.5",
+                "picocolors": "^1.0.0"
+            },
+            "bin": {
+                "svgo": "bin/svgo"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/svgo"
+            }
+        },
         "node_modules/tiny-glob": {
             "version": "0.2.9",
             "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",

package.json

@@ -1,5 +1,5 @@
 {
-    "name": "spacesocial-client",
+    "name": "campfire-client",
     "version": "0.2.0_rev3",
     "description": "social media for the galaxy-wide-web! 🌌",
     "private": true,
@@ -10,8 +10,12 @@
         "preview": "vite preview"
     },
     "author": "ari melody <ari@arimelody.me>",
+    "contributors": [
+        "mae taylor <mae@mae.wtf>"
+    ],
     "license": "GPL-3.0",
     "devDependencies": {
+        "@poppanator/sveltekit-svg": "^4.2.1",
         "@sveltejs/adapter-auto": "^3.2.2",
         "@sveltejs/adapter-static": "^3.0.2",
         "@sveltejs/kit": "^2.5.17",

src/img/icons/bookmark.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.1414 16C96.4815 16 100 19.5746 100 23.9838C100 40.8497 100 80.4817 100 104.016C100 107.201 98.1365 110.082 95.2586 111.345C92.3797 112.609 89.038 112.013 86.7552 109.83C76.4888 100.013 64 88.0719 64 88.0719C64 88.0719 51.5112 100.013 41.2448 109.83C38.962 112.013 35.6204 112.609 32.7414 111.345C29.8635 110.082 28 107.201 28 104.016C28 80.4817 28 40.8497 28 23.9838C28 19.5746 31.5185 16 35.8586 16C49.7059 16 78.2941 16 92.1414 16Z" fill="#D9D9D9"/>
+</svg>

src/img/icons/explore.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <g clip-path="url(#a)">
+    <path fill-rule="evenodd" d="M49.698 17.698c-17.673 0-32 14.327-32 32v29.456c0 17.673 14.327 32 32 32h29.456c17.673 0 32-14.327 32-32V49.698c0-17.673-14.327-32-32-32H49.698Zm41.963 23.469c1.636-2.963-1.622-6.221-4.586-4.586l-18.64 10.29a3.375 3.375 0 0 0-.755 5.34l8.35 8.352a3.375 3.375 0 0 0 5.342-.756l10.29-18.64ZM59.657 65.314a1.688 1.688 0 0 1 0-2.386l3.27-3.27a1.688 1.688 0 0 1 2.387 0l3.27 3.27c.66.659.66 1.727 0 2.386l-3.27 3.27a1.688 1.688 0 0 1-2.386 0l-3.27-3.27ZM36.581 87.075c-1.636 2.964 1.623 6.222 4.586 4.586l18.64-10.29a3.375 3.375 0 0 0 .756-5.34l-8.352-8.352a3.375 3.375 0 0 0-5.34.756l-10.29 18.64Z" clip-rule="evenodd"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M16 16h96v96H16z"/>
+    </clipPath>
+  </defs>
+</svg>

src/img/icons/hashtag.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_135_36)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.2278 87.9024H24.0002C21.4714 87.9024 19.0909 86.7072 17.5817 84.6778C16.0718 82.6493 15.6106 80.0255 16.3372 77.6038L17.0496 75.2299C18.0649 71.8454 21.179 69.5284 24.7125 69.5284H39.6624L42.7666 56.6666H31.3495C28.8207 56.6666 26.441 55.4714 24.9311 53.442C23.4219 51.4135 22.96 48.7897 23.6873 46.368L24.3989 43.9941C25.4143 40.6096 28.5291 38.2927 32.0619 38.2927H47.2012L50.38 25.1231C51.247 21.531 54.4612 19 58.1565 19H58.7262C61.1784 19 63.495 20.1245 65.012 22.051C66.529 23.9775 67.0782 26.4929 66.5027 28.8769L64.2308 38.2927H78.4208L81.5995 25.1231C82.4666 21.531 85.6807 19 89.376 19H89.9458C92.3979 19 94.7145 20.1245 96.2315 22.051C97.7485 23.9775 98.2977 26.4929 97.7223 28.8769L95.4503 38.2927H103.553C106.081 38.2927 108.461 39.4879 109.971 41.5173C111.48 43.5458 111.941 46.1696 111.215 48.5913L110.503 50.9652C109.488 54.3497 106.373 56.6666 102.84 56.6666H91.0157L87.9115 69.5284H96.2032C98.7319 69.5284 101.112 70.7236 102.621 72.7531C104.131 74.7815 104.592 77.4053 103.865 79.827L103.153 82.201C102.138 85.5854 99.0236 87.9024 95.4908 87.9024H83.4769L80.2982 101.072C79.4312 104.664 76.217 107.195 72.5217 107.195H71.952C69.4998 107.195 67.1832 106.071 65.6662 104.144C64.1492 102.218 63.6 99.7022 64.1755 97.3181L66.4474 87.9024H52.2574L49.0787 101.072C48.2116 104.664 44.9974 107.195 41.3022 107.195H40.7324C38.2803 107.195 35.9636 106.071 34.4466 104.144C32.9297 102.218 32.3805 99.7022 32.9559 97.3181L35.2278 87.9024ZM59.7962 56.6666L56.692 69.5284H70.882L73.9862 56.6666H59.7962Z" fill="#E2DFE3"/>
+</g>
+<defs>
+<clipPath id="clip0_135_36">
+<rect width="96" height="89" fill="white" transform="translate(16 19)"/>
+</clipPath>
+</defs>
+</svg>

src/img/icons/info.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <path d="M0 0h128v128H0z"/>
+  <path fill-rule="evenodd" d="M100 64c0 19.882-16.118 36-36 36S28 83.882 28 64s16.118-36 36-36 36 16.118 36 36ZM72 46a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8 12a8 8 0 0 0-8 8v16a8 8 0 1 0 16 0V66a8 8 0 0 0-8-8Z" clip-rule="evenodd"/>
+</svg>

src/img/icons/like.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <path fill-rule="evenodd" d="M58.719 106.897C31.554 85.804 20.068 67.619 16.989 54.07c-2.574-11.324.138-20.218 5.13-26.454C27.613 20.754 36.142 17 44.84 17c8.436 0 14.687 3.415 18.99 7.126C68.133 20.415 74.384 17 82.82 17c8.698 0 17.226 3.754 22.721 10.616 4.992 6.236 7.705 15.13 5.131 26.454-3.081 13.55-14.566 31.734-41.73 52.827l-5.111 3.969-5.111-3.969Zm5.11-6.582c59.315-46.058 39.64-74.982 18.99-74.982-13.241 0-18.99 11.716-18.99 11.716s-5.747-11.716-18.99-11.716c-20.65 0-40.324 28.924 18.99 74.982Z" clip-rule="evenodd"/>
+</svg>

src/img/icons/like_fill.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <g clip-path="url(#a)">
+    <path fill-rule="evenodd" d="M58.719 106.897C31.554 85.804 20.068 67.619 16.989 54.07c-2.574-11.324.138-20.218 5.13-26.454C27.613 20.754 36.142 17 44.84 17c8.436 0 14.687 3.415 18.99 7.126C68.133 20.415 74.384 17 82.82 17c8.698 0 17.226 3.754 22.721 10.616 4.992 6.236 7.705 15.13 5.131 26.454-3.081 13.55-14.566 31.734-41.73 52.827l-5.111 3.969-5.111-3.969Z" clip-rule="evenodd"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M16 16h96v96H16z"/>
+    </clipPath>
+  </defs>
+</svg>

src/img/icons/likealt.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <g clip-path="url(#a)">
+    <path d="m63.5 22.944 8.432 25.95a8 8 0 0 0 7.608 5.529h27.286L84.751 70.46a8 8 0 0 0-2.906 8.944l8.432 25.95-22.075-16.038a8 8 0 0 0-9.404 0l-22.075 16.038 8.432-25.95a8 8 0 0 0-2.906-8.944L20.174 54.423H47.46a8 8 0 0 0 7.608-5.528l8.432-25.95Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M16 16h96v96H16z"/>
+    </clipPath>
+  </defs>
+</svg>

src/img/icons/likealt_fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <path d="M59.696 20.708c1.197-3.685 6.41-3.685 7.608 0l8.432 25.95a4 4 0 0 0 3.804 2.764h27.286c3.875 0 5.486 4.959 2.351 7.237L87.102 72.697a4 4 0 0 0-1.453 4.472l8.432 25.95c1.198 3.686-3.02 6.75-6.155 4.472L65.85 91.553a4 4 0 0 0-4.702 0l-22.075 16.038c-3.135 2.278-7.353-.786-6.155-4.472l8.432-25.95a4 4 0 0 0-1.453-4.472L17.823 56.659c-3.135-2.278-1.524-7.236 2.35-7.236H47.46a4 4 0 0 0 3.804-2.764l8.432-25.95Z"/>
+</svg>

src/img/icons/lists.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <path fill-rule="evenodd" d="M36 16h4.03c.517 8.37 7.47 15 15.97 15h16c8.5 0 15.453-6.63 15.97-15H92a8 8 0 0 1 8 8v80a8 8 0 0 1-8 8H36a8 8 0 0 1-8-8V24a8 8 0 0 1 8-8Zm43.938 0H48.062A8.001 8.001 0 0 0 56 23h16a8.001 8.001 0 0 0 7.938-7ZM44 46a4 4 0 0 0 0 8h41a4 4 0 0 0 0-8H44Zm-4 20a4 4 0 0 1 4-4h41a4 4 0 0 1 0 8H44a4 4 0 0 1-4-4Zm4 12a4 4 0 0 0 0 8h41a4 4 0 0 0 0-8H44Z" clip-rule="evenodd"/>
+</svg>

src/img/icons/logout.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <g clip-path="url(#a)">
+    <path fill-rule="evenodd" d="M42.23 17A9.23 9.23 0 0 0 33 26.23v76.155a9.23 9.23 0 0 0 9.23 9.23h41.54a9.23 9.23 0 0 0 9.23-9.23v-7.247c-7.175 1.296-14.923-3.924-14.923-12.444v-1.88H72.23C62.714 80.813 55 73.098 55 63.581c0-9.516 7.714-17.23 17.23-17.23h5.847v-.727c0-8.52 7.748-13.74 14.923-12.445v-6.95A9.23 9.23 0 0 0 83.77 17H42.23ZM93 41.614c-2.899-1.703-6.923.297-6.923 4.01v8.728H72.23a9.23 9.23 0 0 0 0 18.461h13.846v9.88c0 3.715 4.024 5.715 6.923 4.011v-45.09Z" clip-rule="evenodd"/>
+    <path fill-rule="evenodd" d="M110.949 67.263a4.616 4.616 0 0 0 0-6.208l-16.84-18.534c-2.838-3.123-8.032-1.115-8.032 3.104v8.727H72.23a9.23 9.23 0 0 0 0 18.461h13.846v9.88c0 4.22 5.194 6.227 8.031 3.105l16.841-18.535Z" clip-rule="evenodd"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M16 16h96v96H16z"/>
+    </clipPath>
+  </defs>
+</svg>

src/img/icons/more.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <circle cx="28" cy="64" r="12"/>
+  <circle cx="64" cy="64" r="12"/>
+  <circle cx="100" cy="64" r="12"/>
+</svg>

src/img/icons/notifications.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <g clip-path="url(#a)">
+    <path d="M28 48c0-17.673 14.327-32 32-32h9c17.673 0 32 14.327 32 32v33a8 8 0 0 1-8 8H36a8 8 0 0 1-8-8V48Z"/>
+    <path fill-rule="evenodd" d="M53.417 84h21.166c-2.82-2.49-6.525-4-10.583-4a15.94 15.94 0 0 0-10.583 4Zm26.552 13H48.031c.516 8.371 7.468 15 15.969 15 8.5 0 15.453-6.629 15.97-15Z" clip-rule="evenodd"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M16 16h96v96H16z"/>
+    </clipPath>
+  </defs>
+</svg>

src/img/icons/post.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <path fill-rule="evenodd" d="M36 103c.151 0 .302-.004.45-.012a11.97 11.97 0 0 0 9.035-3.503l3.868-3.868-16.97-16.97-3.868 3.868A11.962 11.962 0 0 0 25 90.993V103h11Zm19.01-13.04 44.475-44.475c4.687-4.686 4.687-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0L38.04 72.99l16.97 16.97Z" clip-rule="evenodd"/>
+</svg>

src/img/icons/quote.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.5 94V79H31C24.373 79 19 73.627 19 67V40C19 33.373 24.373 28 31 28H49.75C56.377 28 61.75 33.373 61.75 40V73C61.75 75.07 61.162 77.76 60.261 80.421C59.396 82.977 58.159 85.8 56.647 88.446C55.093 91.166 53.166 93.828 50.962 95.865C48.479 98.157 45.232 100 41.5 100C38.186 100 35.5 97.314 35.5 94ZM41.5 94C43.654 94 45.458 92.78 46.891 91.457C48.664 89.819 50.187 87.657 51.437 85.469C52.751 83.17 53.826 80.717 54.578 78.496C55.247 76.52 55.75 74.537 55.75 73V40C55.75 36.686 53.064 34 49.75 34H31C27.686 34 25 36.686 25 40V67C25 70.314 27.686 73 31 73H38.5C40.157 73 41.5 74.343 41.5 76V94ZM82.25 94V79H77.75C71.123 79 65.75 73.627 65.75 67V40C65.75 33.373 71.123 28 77.75 28H96.5C103.127 28 108.5 33.373 108.5 40V73C108.5 75.07 107.912 77.76 107.011 80.421C106.146 82.977 104.909 85.8 103.397 88.446C101.843 91.166 99.916 93.828 97.712 95.865C95.229 98.157 91.982 100 88.25 100C84.936 100 82.25 97.314 82.25 94ZM88.25 94C90.404 94 92.208 92.78 93.641 91.457C95.414 89.819 96.937 87.657 98.187 85.469C99.501 83.17 100.576 80.717 101.328 78.496C101.997 76.52 102.5 74.537 102.5 73V40C102.5 36.686 99.814 34 96.5 34H77.75C74.436 34 71.75 36.686 71.75 40V67C71.75 70.314 74.436 73 77.75 73H85.25C86.907 73 88.25 74.343 88.25 76V94Z"/>
+</svg>

src/img/icons/react.svg

@@ -0,0 +1,15 @@
+<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_114_221)">
+<circle cx="52" cy="76" r="32" stroke="currentColor" stroke-width="8"/>
+<circle cx="39.4444" cy="74.1898" r="6.22222" fill="currentColor"/>
+<circle cx="64.3333" cy="74.1898" r="6.22222" fill="currentColor"/>
+<path d="M42.2222 88.2176C43.9722 89.5787 46.6666 91.7731 51.9999 91.7731C57.3333 91.7731 60.0278 89.5787 61.7777 88.2176" stroke="currentColor" stroke-width="7.11111" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M90 21C90 19.8954 90.8954 19 92 19H96C97.1046 19 98 19.8954 98 21V49C98 50.1046 97.1046 51 96 51H92C90.8954 51 90 50.1046 90 49V21Z" fill="currentColor"/>
+<path d="M80 39C78.8954 39 78 38.1046 78 37V33C78 31.8954 78.8954 31 80 31H108C109.105 31 110 31.8954 110 33V37C110 38.1046 109.105 39 108 39H80Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_114_221">
+<rect width="96" height="96" fill="currentColor" transform="translate(16 16)"/>
+</clipPath>
+</defs>
+</svg>

src/img/icons/reply.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <path fill-rule="evenodd" d="M78 34H49c-13.255 0-24 10.745-24 24v11c0 13.255 10.745 24 24 24h53V58c0-13.255-10.745-24-24-24Zm-29-8c-17.673 0-32 14.327-32 32v11c0 17.673 14.327 32 32 32h61V58c0-17.673-14.327-32-32-32H49Z" clip-rule="evenodd"/>
+</svg>

src/img/icons/repost.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <g clip-path="url(#a)">
+    <path d="M30.57 39.698 16.057 64.835h29.026L30.57 39.698Zm43.572 57.816a2.514 2.514 0 1 0 0-5.028v5.028Zm-41.058-15.92V62.32h-5.028v19.272h5.028Zm10.893 15.92H74.14v-5.028H43.977v5.028Zm-15.92-15.92c0 8.792 7.127 15.92 15.92 15.92v-5.028c-6.016 0-10.893-4.877-10.893-10.893h-5.028Z"/>
+    <path d="M74.139 99.486a4.692 4.692 0 1 0 0-9.385v9.385Zm-30.162 0h30.162v-9.385H43.977v9.385Zm-8.715-18.099v-16.99h-9.384v16.99h9.384Zm8.715 8.714a8.714 8.714 0 0 1-8.715-8.714h-9.384c0 9.996 8.103 18.099 18.099 18.099v-9.385Zm52.453-.373 14.513-25.138H81.917L96.43 89.728ZM52.86 31.486a2.514 2.514 0 1 0 0 5.028v-5.028Zm41.055 15.92v19.698h5.028V47.407h-5.028Zm-10.893-15.92H52.861v5.028h30.162v-5.028Zm15.92 15.92c0-8.792-7.127-15.92-15.92-15.92v5.028c6.016 0 10.893 4.877 10.893 10.893h5.028Z"/>
+    <path d="M52.858 29.308a4.692 4.692 0 1 0 0 9.384v-9.384Zm30.165 0H52.86v9.384h30.164v-9.384Zm8.715 18.099V68h9.384V47.407h-9.384Zm-8.715-8.715a8.714 8.714 0 0 1 8.715 8.715h9.384c0-9.996-8.103-18.1-18.099-18.1v9.385Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M16 16h96v96H16z"/>
+    </clipPath>
+  </defs>
+</svg>

src/img/icons/search.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <g clip-path="url(#a)">
+    <circle cx="53.5" cy="54.5" r="22.5"/>
+    <path d="M97.47 107.001a6 6 0 0 0 8.485-8.485l-8.485 8.485Zm-24-24 24 24 8.485-8.485-24-24-8.485 8.485Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M16 16h96v96H16z"/>
+    </clipPath>
+  </defs>
+</svg>

src/img/icons/settings.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <g clip-path="url(#a)">
+    <path d="M107.742 41.773a26.944 26.944 0 0 1-2.808 16.212c-2.601 4.963-6.685 8.954-11.66 11.394a25.559 25.559 0 0 1-16.01 2.178c-5.428-1.025-10.396-3.785-14.183-7.88a26.72 26.72 0 0 1-6.88-14.894 26.931 26.931 0 0 1 3.076-16.162c2.683-4.917 6.832-8.837 11.846-11.19a25.553 25.553 0 0 1 16.045-1.902l-3.334 16.756a9.066 9.066 0 0 0-5.693.675 9.296 9.296 0 0 0-4.203 3.97 9.555 9.555 0 0 0-1.092 5.735 9.479 9.479 0 0 0 2.441 5.285 9.176 9.176 0 0 0 5.033 2.795 9.068 9.068 0 0 0 5.68-.773 9.304 9.304 0 0 0 4.137-4.042 9.558 9.558 0 0 0 .996-5.752l16.609-2.405Z"/>
+  </g>
+  <rect width="25" height="75.773" x="67.609" y="43.703" rx="12.5" transform="rotate(46.112 67.61 43.703)"/>
+  <defs>
+    <clipPath id="a">
+      <path d="M16 16h96v96H16z"/>
+    </clipPath>
+  </defs>
+</svg>

src/img/icons/timeline.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
+  <g clip-path="url(#a)">
+    <rect width="73" height="25" x="27.5" y="16" rx="8"/>
+    <rect width="73" height="41" x="27.5" y="47" rx="8"/>
+    <rect width="73" height="25" x="27.5" y="94" rx="8"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path d="M16 16h96v96H16z"/>
+    </clipPath>
+  </defs>
+</svg>

src/lib/ui/Button.svelte

@@ -34,6 +34,9 @@
         title={label}
         aria-label={label}
         on:click={() => click()}>
+    <span class="icon">
+        <slot name="icon" />
+    </span>
     <slot/>
 </button>
 
@@ -45,7 +48,6 @@
         padding: 16px;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
         align-items: center;
 
         font-family: inherit;
@@ -131,4 +133,17 @@
 
     button.disabled:active {
     }
+
+    .icon:not(:empty) {
+        height: 150%;
+        margin-right: 8px;
+    }
+
+    .icon :global(svg) {
+        height: 100%;
+    }
+
+    .centered .icon {
+        margin-right: 0px;
+    }
 </style>

src/lib/ui/Navigation.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Logo from '$lib/../img/CampfireLogo.svelte';
+    import Logo from '$lib/../img/campfire-logo.svg';
     import Button from './Button.svelte';
     import Feed from './Feed.svelte';
     import { Client } from '$lib/client/client.js';
@@ -8,6 +8,18 @@
     import { goto } from '$app/navigation';
     import { get } from 'svelte/store';
 
+    import TimelineIcon from '../../img/icons/timeline.svg';
+    import NotificationsIcon from '../../img/icons/notifications.svg';
+    import ExploreIcon from '../../img/icons/explore.svg';
+    import ListIcon from '../../img/icons/lists.svg';
+    import FavouritesIcon from '../../img/icons/like_fill.svg';
+    import BookmarkIcon from '../../img/icons/bookmark.svg';
+    import HashtagIcon from '../../img/icons/hashtag.svg';
+    import PostIcon from '../../img/icons/post.svg';
+    import InfoIcon from '../../img/icons/info.svg';
+    import SettingsIcon from '../../img/icons/settings.svg';
+    import LogoutIcon from '../../img/icons/logout.svg';
+
     const VERSION = APP_VERSION;
     
     let client = false;
@@ -44,36 +56,85 @@
         </header>
     {:else}
         <header class="instance-header">
+            <div class="app-logo">
                 <Logo />
+            </div>
         </header>
     {/if}
 
     <div id="nav-items">
-        <Button label="Timeline" on:click={() => goTimeline()} active={client.user}>🖼️ Timeline</Button>
+        <Button label="Timeline" on:click={() => goTimeline()} active={client.user}>
+            <svelte:fragment slot="icon">
+                <TimelineIcon/>
+            </svelte:fragment>
+            Timeline
+        </Button>
         <Button label="Notifications" disabled>
-            🔔 Notifications
+            <svelte:fragment slot="icon">
+                <NotificationsIcon/>
+            </svelte:fragment>
+            Notifications
             {#if notification_count}
             <span class="notification-count">{notification_count}</span>
             {/if}
         </Button>
-        <Button label="Explore" disabled>🌍 Explore</Button>
+        <Button label="Explore" disabled>
-        <Button label="Lists" disabled>🗒️ Lists</Button>
+            <svelte:fragment slot="icon">
+                <ExploreIcon height="auto"/>
+            </svelte:fragment>
+            Explore
+        </Button>
+        <Button label="Lists" disabled>
+            <svelte:fragment slot="icon">
+                <ListIcon/>
+            </svelte:fragment>
+            Lists
+        </Button>
 
         <div class="flex-row">
-            <Button centered label="Favourites" disabled>⭐</Button>
+            <Button centered label="Favourites" disabled>
-            <Button centered label="Bookmarks" disabled>🔖</Button>
+                <svelte:fragment slot="icon">
-            <Button centered label="Hashtags" disabled>#</Button>
+                    <FavouritesIcon/>
+                </svelte:fragment>
+            </Button>
+            <Button centered label="Bookmarks" disabled>
+                <svelte:fragment slot="icon">
+                    <BookmarkIcon/>
+                </svelte:fragment>
+            </Button>
+            <Button centered label="Hashtags" disabled>
+                <svelte:fragment slot="icon">
+                    <HashtagIcon/>
+                </svelte:fragment>
+            </Button>
         </div>
 
-        <Button filled label="Post" disabled>✏️ Post</Button>
+        <Button filled label="Post" disabled>
+            <svelte:fragment slot="icon">
+                <PostIcon/>
+            </svelte:fragment>
+            Post
+            </Button>
     </div>
 
     {#if (client.user)}
     <div id="account-items">
         <div class="flex-row">
-            <Button centered label="Profile information" disabled>ℹ️</Button>
+            <Button centered label="Profile information" disabled>
-            <Button centered label="Settings" disabled>⚙️</Button>
+                <svelte:fragment slot="icon">
-            <Button centered label="Log out" on:click={() => log_out()}>🚪</Button>
+                    <InfoIcon/>
+                </svelte:fragment>
+            </Button>
+            <Button centered label="Settings" disabled>
+                <svelte:fragment slot="icon">
+                    <SettingsIcon/>
+                </svelte:fragment>
+            </Button>
+            <Button centered label="Log out" on:click={() => log_out()}>
+                <svelte:fragment slot="icon">
+                    <LogoutIcon/>
+                </svelte:fragment>
+            </Button>
         </div>
 
         <div id="account-button">

src/lib/ui/Widgets.svelte

@@ -1,5 +1,5 @@
 <div id="widgets">
-    <input type="text" id="search" placeholder="🔍 Search">
+    <input type="text" id="search" placeholder="Search">
 </div>
 
 <style>

src/lib/ui/post/ActionButton.svelte

@@ -29,7 +29,11 @@
         title="{title}"
         on:click={click}>
         <span class="icon">
+            {#if active}
+                <slot name="activeIcon"/>
+            {:else} 
                 <slot/>
+            {/if}
         </span>
         {#if count}
             <span class="count">{count}</span>
@@ -38,10 +42,11 @@
 
 <style>
     button {
-        height: 32px;
+        /* height: 32px; */
         padding: 6px 8px;
         display: flex;
         flex-direction: row;
+        align-items: center;
         gap: 4px;
         font-family: inherit;
         font-size: 1em;
@@ -55,7 +60,6 @@
 
     button.active {
         background-color: color-mix(in srgb, transparent, var(--accent) 50%); 
-        color: var(--bg-1000);
     }
 
     button:not(.disabled):hover {
@@ -74,8 +78,8 @@
     }
 
     .icon {
-        width: 20px;
+        width: 24px;
-        height: 20px;
+        height: 24px;
         display: flex;
         justify-content: center;
         align-items: center;

src/lib/ui/post/Post.svelte

@@ -13,6 +13,14 @@
     import * as api from '../../client/api.js';
     import { goto } from '$app/navigation';
 
+    import ReplyIcon from '../../../img/icons/reply.svg';
+    import RepostIcon from '../../../img/icons/repost.svg';
+    import FavouriteIcon from '../../../img/icons/like.svg';
+    import FavouriteIconFill from '../../../img/icons/like_fill.svg';
+    import ReactIcon from '../../../img/icons/react.svg';
+    import QuoteIcon from '../../../img/icons/quote.svg';
+    import MoreIcon from '../../../img/icons/more.svg';
+
     export let post_data;
     export let focused = false;
 
@@ -125,12 +133,30 @@
                 {/each}
             </div>
             <div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation>
-                <ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
+                <ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>
-                <ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
+                    <ReplyIcon/>
-                <ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
+                </ActionButton>
-                <ActionButton type="react" label="React" disabled>😃</ActionButton>
+                <ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">
-                <ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
+                    <RepostIcon/>
-                <ActionButton type="more" label="More" disabled>🛠️</ActionButton>
+                    <svelte:fragment slot="activeIcon">
+                        <RepostIcon/>
+                    </svelte:fragment>
+                </ActionButton>
+                <ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>
+                    <FavouriteIcon/>
+                    <svelte:fragment slot="activeIcon">
+                        <FavouriteIconFill/>
+                    </svelte:fragment>
+                </ActionButton>
+                <ActionButton type="react" label="React" disabled>
+                    <ReactIcon/>
+                </ActionButton>
+                <ActionButton type="quote" label="Quote" disabled>
+                    <QuoteIcon/>
+                </ActionButton>
+                <ActionButton type="more" label="More" disabled>
+                    <MoreIcon/>
+                </ActionButton>
             </div>
         </footer>
     </article>

src/lib/ui/post/ReplyContext.svelte

@@ -11,6 +11,14 @@
     import * as api from '../../client/api.js';
     import { goto } from '$app/navigation';
 
+    import ReplyIcon from '../../../img/icons/reply.svg';
+    import RepostIcon from '../../../img/icons/repost.svg';
+    import FavouriteIcon from '../../../img/icons/like.svg';
+    import FavouriteIconFill from '../../../img/icons/like_fill.svg';
+    import ReactIcon from '../../../img/icons/react.svg';
+    import QuoteIcon from '../../../img/icons/quote.svg';
+    import MoreIcon from '../../../img/icons/more.svg';
+
     export let post;
     let time_string = post.created_at.toLocaleString();
     let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
@@ -107,12 +115,30 @@
                 {/each}
             </div>
             <div class="post-actions" aria-label="Post actions" on:click|stopPropagation on:keydown|stopPropagation>
-                <ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
+                <ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>
-                <ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
+                    <ReplyIcon/>
-                <ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
+                </ActionButton>
-                <ActionButton type="react" label="React" disabled>😃</ActionButton>
+                <ActionButton type="boost" label="Boost" on:click={toggleBoost} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">
-                <ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
+                    <RepostIcon/>
-                <ActionButton type="more" label="More" disabled>🛠️</ActionButton>
+                    <svelte:fragment slot="activeIcon">
+                        <RepostIcon/>
+                    </svelte:fragment>
+                </ActionButton>
+                <ActionButton type="favourite" label="Favourite" on:click={toggleFavourite} bind:active={post.favourited} bind:count={post.favourite_count}>
+                    <FavouriteIcon/>
+                    <svelte:fragment slot="activeIcon">
+                        <FavouriteIconFill/>
+                    </svelte:fragment>
+                </ActionButton>
+                <ActionButton type="react" label="React" disabled>
+                    <ReactIcon/>
+                </ActionButton>
+                <ActionButton type="quote" label="Quote" disabled>
+                    <QuoteIcon/>
+                </ActionButton>
+                <ActionButton type="more" label="More" disabled>
+                    <MoreIcon/>
+                </ActionButton>
             </div>
         </footer>
     </div>

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-    import Logo from '$lib/../img/CampfireLogo.svelte';
+    import Logo from '$lib/../img/campfire-logo.svg';
     import Feed from '$lib/ui/Feed.svelte';
     import { Client } from '$lib/client/client.js';
     import User from '$lib/user/user.js';
@@ -52,7 +52,9 @@
     <Feed />
 {:else}
     <form on:submit={log_in} id="login-form">
+        <div class="app-logo">
             <Logo />
+        </div>
         <p>Welcome, fediverse user!</p>
         <p>Please enter your instance domain to log in.</p>
         <div class="input-wrapper">

vite.config.js

@@ -2,6 +2,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
+import svg from '@poppanator/sveltekit-svg'
 
 const packageFile = fileURLToPath(new URL('package.json', import.meta.url));
 const packageData = readFileSync(packageFile, 'utf8');
@@ -9,7 +10,10 @@ const packageJSON = JSON.parse(packageData);
 
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [
+        sveltekit(),
+        svg()
+    ],
     define: {
         APP_VERSION: JSON.stringify(packageJSON.version)
     }