feat: simple icons (#171)

Author: jrasm91

package-lock.json

@@ -15,7 +15,7 @@
     "format:fix": "prettier --write ."
   },
   "devDependencies": {
-    "@immich/ui": "^0.23.0",
+    "@immich/ui": "^0.24.1",
     "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.26.1",
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
@@ -41,7 +41,8 @@
   },
   "type": "module",
   "dependencies": {
-    "@mdi/js": "^7.4.47"
+    "@mdi/js": "^7.4.47",
+    "simple-icons": "^15.9.0"
   },
   "volta": {
     "node": "22.18.0"

package.json

@@ -1,17 +1,7 @@
 <script lang="ts">
   import { Card, Heading, HStack, Icon, Link, Stack, Text, ThemeSwitcher, VStack } from '@immich/ui';
-  import {
-    mdiAndroid,
-    mdiApple,
-    mdiGithub,
-    mdiKey,
-    mdiMessageOutline,
-    mdiOfficeBuildingOutline,
-    mdiReddit,
-    mdiServerOutline,
-    mdiShoppingOutline,
-    mdiWeb,
-  } from '@mdi/js';
+  import { mdiKey, mdiOfficeBuildingOutline, mdiServerOutline, mdiShoppingOutline } from '@mdi/js';
+  import { siAndroid, siApple, siDiscord, siGithub, siImmich, siReddit } from 'simple-icons';
 </script>
 
 <div class="bg-dark/10 rounded-t-3xl mt-16 p-8">
@@ -22,19 +12,19 @@
           <Heading size="tiny">Social</Heading>
           <Link href="https://github.com/immich-app/immich" target="_blank" rel="noopener noreferrer">
             <HStack>
-              <Icon icon={mdiGithub} size="1.5em" />
+              <Icon icon={siGithub} size="1.5em" />
               <Text>GitHub</Text>
             </HStack>
           </Link>
           <Link href="https://discord.immich.app/" target="_blank" rel="noopener noreferrer">
             <HStack>
-              <Icon icon={mdiMessageOutline} size="1.5em" />
+              <Icon icon={siDiscord} size="1.5em" />
               <Text>Discord</Text>
             </HStack>
           </Link>
           <Link href="https://www.reddit.com/r/immich/" target="_blank" rel="noopener noreferrer">
             <HStack>
-              <Icon icon={mdiReddit} size="1.5em" />
+              <Icon icon={siReddit.path} size="1.5em" />
               <Text>Reddit</Text>
             </HStack>
           </Link>
@@ -48,13 +38,13 @@
             rel="noopener noreferrer"
           >
             <HStack>
-              <Icon icon={mdiAndroid} size="1.5em" />
+              <Icon icon={siAndroid.path} size="1.5em" />
               <Text>Android</Text>
             </HStack>
           </Link>
           <Link href="https://apps.apple.com/us/app/immich/id1613945652" target="_blank" rel="noopener noreferrer">
             <HStack>
-              <Icon icon={mdiApple} size="1.5em" />
+              <Icon icon={siApple.path} size="1.5em" />
               <Text>iOS</Text>
             </HStack>
           </Link>
@@ -86,13 +76,13 @@
           <Heading size="tiny">Sites</Heading>
           <Link href="https://immich.app" target="_blank" rel="noopener noreferrer">
             <HStack>
-              <Icon icon={mdiWeb} size="1.5em" />
+              <Icon icon={siImmich} size="1.5em" />
               <Text>Documentation</Text>
             </HStack>
           </Link>
           <Link href="https://my.immich.app" target="_blank" rel="noopener noreferrer">
             <HStack>
-              <Icon icon={mdiWeb} size="1.5em" />
+              <Icon icon={siImmich} size="1.5em" />
               <Text>My Immich</Text>
             </HStack>
           </Link>