updates

astro.config.mjs

@@ -1,9 +1,10 @@
 import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
-
 import svelte from "@astrojs/svelte";
+import icon from "astro-icon";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), svelte()],
+  integrations: [tailwind(), svelte(), icon()],
+  compressHTML: false,
 });

package.json

@@ -10,14 +10,16 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/svelte": "^4.0.2",
-    "@astrojs/tailwind": "^5.0.0",
-    "astro": "^3.0.13",
-    "astro-icon": "^0.8.1",
+    "@astrojs/svelte": "^5.0.3",
+    "@astrojs/tailwind": "^5.1.0",
+    "@iconify-json/mdi": "^1.1.64",
+    "@iconify-json/simple-icons": "^1.1.87",
+    "astro": "^4.1.2",
+    "astro-icon": "^1.0.2",
     "pixi-live2d-display": "^0.4.0",
     "pixi.js": "^6.5.10",
-    "svelte": "^4.2.0",
-    "tailwindcss": "^3.3.3"
+    "svelte": "^4.2.8",
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@catppuccin/tailwindcss": "^0.1.6"

src/components/Centerpiece.astro

@@ -27,7 +27,7 @@ import blobHeart from "../assets/blobheart.png";
 </div>
 
 <style>
-  [astro-icon] {
+  [data-icon] {
     width: 3rem;
   }
 </style>

src/components/Icons.astro

@@ -1,14 +1,20 @@
 ---
-import { Icon } from "astro-icon";
+import { Icon } from "astro-icon/components";
 ---
 
 <div class="flex flex-wrap justify-center gap-x-3 lg:mt-6 mt-5">
   <a href="https://github.com/artiemis" target="_blank">
     <Icon name="mdi:github" />
   </a>
-  <a class="group relative" href="https://discord.com/users/134306884617371648" target="_blank">
+  <a
+    class="group relative"
+    href="https://discord.com/users/134306884617371648"
+    target="_blank"
+  >
     <Icon class="hover:text-[#5865F2]" name="mdi:discord" />
-    <div class="absolute xl:w-[28rem] top-10 left-8 z-10 xl:group-hover:opacity-100 transition-opacity opacity-0 pointer-events-none">
+    <div
+      class="absolute xl:w-[28rem] top-10 left-8 z-10 xl:group-hover:opacity-100 transition-opacity opacity-0 pointer-events-none"
+    >
       <img
         class="pointer-events-none"
         src="https://lanyard.cnrad.dev/api/134306884617371648?hideDiscrim=true&showDisplayName=true&bg=1e2030"
@@ -17,7 +23,11 @@ import { Icon } from "astro-icon";
     </div>
   </a>
   <a rel="me" href="https://infosec.exchange/@artie" target="_blank">
-    <Icon class="hover:text-[#6364FF]" title="@artie@infosec.exchange" name="mdi:mastodon" />
+    <Icon
+      class="hover:text-[#6364FF]"
+      title="@artie@infosec.exchange"
+      name="mdi:mastodon"
+    />
   </a>
   <a href="https://twitter.com/artiebun" target="_blank">
     <Icon class="hover:text-[#1DA1F2]" name="mdi:twitter" />
@@ -31,16 +41,17 @@ import { Icon } from "astro-icon";
 </div>
 
 <style>
-  [astro-icon] {
+  [data-icon] {
     width: 2rem;
+    height: auto;
     transition: 0.4s ease-out;
   }
 
-  [astro-icon="wizard-hat"] {
+  [data-icon="wizard-hat"] {
     width: 1.8rem;
   }
 
-  [astro-icon]:hover {
+  [data-icon]:hover {
     transform: rotateZ(360deg);
   }
 </style>

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/pages/index.astro

@@ -7,7 +7,6 @@ import Model from "../components/Model.svelte";
 ---
 
 <Layout title="artie">
-  <!-- <Snow /> -->
   <Prompt />
   <Centerpiece />
   <Icons />