feat: iconify icons

astro.config.ts

@@ -2,9 +2,10 @@ import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import metaTags from "astro-meta-tags";
 import { defineConfig } from "astro/config";
-
 import tailwind from "@astrojs/tailwind";
 
+import icon from "astro-icon";
+
 // https://astro.build/config
 export default defineConfig({
 	site: "https://teaclient.net",
@@ -15,7 +16,13 @@ export default defineConfig({
 		mdx(),
 		metaTags(),
 		sitemap(),
-		tailwind({ nesting: true, applyBaseStyles: true }),
+		tailwind({
+			nesting: true,
+			applyBaseStyles: true,
+		}),
+		icon({
+			iconDir: "src/icons",
+		}),
 	],
 	redirects: {
 		"/discord": "https://discord.gg/ejFTe4Hfnc",

package.json

@@ -1,62 +1,65 @@
 {
-	"name": "teaclient-website",
-	"type": "module",
-	"version": "0.0.1",
-	"scripts": {
-		"dev": "astro dev",
-		"preview": "astro preview",
-		"build": "astro build",
-		"astro": "astro",
-		"lint": "biome check --apply . && bun lint:css --fix",
-		"lint:css": "stylelint 'src/styles/**/*.css'",
-		"fmt": "biome format . --write",
-		"biome": "bunx @biomejs/biome",
-		"check": "biome check . && bun lint:css && bun astro check",
-		"postinstall": "husky install"
-	},
-	"trustedDependencies": ["sharp"],
-	"stylelint": {
-		"extends": "stylelint-config-standard",
-		"plugins": ["stylelint-scss"],
-		"customSyntax": "postcss-scss",
-		"rules": {
-			"at-rule-no-unknown": null,
-			"selector-class-pattern": null,
-			"scss/at-rule-no-unknown": true,
-			"custom-property-pattern": null
-		}
-	},
-	"commitlint": {
-		"extends": ["@commitlint/config-conventional"]
-	},
-	"dependencies": {
-		"@astrojs/mdx": "^2.0.2",
-		"@astrojs/rss": "^3.0.0",
-		"@astrojs/sitemap": "^3.1.1",
-		"@astrojs/tailwind": "^5.1.0",
-		"@astrojs/ts-plugin": "^1.3.1",
-		"astro-meta-tags": "^0.2.1",
-		"astro-seo": "^0.8.0",
-		"axios": "^1.6.5",
-		"sass": "^1.71.1",
-		"sharp": "^0.33.2",
-		"tailwind-merge": "^2.2.1",
-		"tailwindcss": "^3.4.1",
-		"web-vitals": "^3.5.0"
-	},
-	"devDependencies": {
-		"@astrojs/check": "^0.2.0",
-		"@biomejs/biome": "^1.5.3",
-		"@commitlint/cli": "^18.4.3",
-		"@commitlint/config-conventional": "^18.4.3",
-		"@types/node": "^20.8.3",
-		"astro": "^4.2.3",
-		"husky": "^8.0.3",
-		"postcss-scss": "^4.0.9",
-		"stylelint": "^15.11.0",
-		"stylelint-config-standard": "^34.0.0",
-		"stylelint-scss": "^6.2.1",
-		"typescript": "^5.2.2"
-	},
-	"packageManager": "[email protected]"
+  "name": "teaclient-website",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "preview": "astro preview",
+    "build": "astro build",
+    "astro": "astro",
+    "lint": "biome check --apply . && bun lint:css --fix",
+    "lint:css": "stylelint 'src/styles/**/*.css'",
+    "fmt": "biome format . --write",
+    "biome": "bunx @biomejs/biome",
+    "check": "biome check . && bun lint:css && bun astro check",
+    "postinstall": "husky install"
+  },
+  "trustedDependencies": ["sharp"],
+  "stylelint": {
+    "extends": "stylelint-config-standard",
+    "plugins": ["stylelint-scss"],
+    "customSyntax": "postcss-scss",
+    "rules": {
+      "at-rule-no-unknown": null,
+      "selector-class-pattern": null,
+      "scss/at-rule-no-unknown": true,
+      "custom-property-pattern": null
+    }
+  },
+  "commitlint": {
+    "extends": ["@commitlint/config-conventional"]
+  },
+  "dependencies": {
+    "@astrojs/mdx": "^2.2.2",
+    "@astrojs/rss": "^3.0.0",
+    "@astrojs/sitemap": "^3.1.1",
+    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/ts-plugin": "^1.3.1",
+    "@iconify-json/ic": "^1.1.17",
+    "@iconify-json/mdi": "^1.1.64",
+    "astro-icon": "^1.1.0",
+    "astro-meta-tags": "^0.2.1",
+    "astro-seo": "^0.8.0",
+    "axios": "^1.6.5",
+    "sass": "^1.71.1",
+    "sharp": "^0.33.2",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss": "^3.4.1",
+    "web-vitals": "^3.5.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.2.0",
+    "@biomejs/biome": "^1.5.3",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@types/node": "^20.8.3",
+    "astro": "^4.5.10",
+    "husky": "^8.0.3",
+    "postcss-scss": "^4.0.9",
+    "stylelint": "^15.11.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-scss": "^6.2.1",
+    "typescript": "^5.2.2"
+  },
+  "packageManager": "[email protected]"
 }

src/components/shared/footer.astro

@@ -1,54 +1,20 @@
 ---
-import { Image } from "astro:assets";
-import DiscordSVG from "@assets/svgs/Discord.svg";
-import GithubSVG from "@assets/svgs/Github-white.svg";
-
-const logosizes = 36;
+import { Icon } from 'astro-icon/components'
+const logosizes = 26
 ---
 
-
 <footer class="w-full pt-[40px] top-full text-white ">
-  <div id="copyright">
+ <div id="copyright">
     <p>A Project Made with Love by TeaClient Team ♥️</p>
     <p>&copy; TeaClientMC. ALL RIGHTS RESERVED</p>
     <p>Not Afffliated with mojang or Minecraft</p>
-  </div>
-  <div id="Socials">
+ </div>
+ <div id="Socials">
     <a href="/discord" target="_blank" rel="noopener noreferrer">
-      <Image src={DiscordSVG} alt="Discord Logo" width={logosizes} height={logosizes} class="grayscale-custom pt-1"/>
+      <Icon icon="ic:baseline-discord" size={logosizes} class="text-neutral-300 pt-1"/>
     </a>
     <a href="/github" target="_blank" rel="noopener noreferrer">
-      <Image src={GithubSVG} alt="Github Logo" width={logosizes} height={logosizes} class="grayscale-custom"/>
+      <Icon icon="mdi:github" size={logosizes} class="text-neutral-300"/>
     </a>
-  </div>
-</footer>
-
-
-
-
-
-<style>
-footer {
-    p {
-      @apply text-white font-bold font-sans text-sm mb-1;
-      word-spacing: 2px;
-    }
-
-   #copyright {
-    @apply flex flex-col float-left ml-[20px];
-   }
-
-   #copyright p:last-child {
-    @apply mb-5 text-gray-600;
-   }
-
-   #Socials .grayscale-custom {
-  filter: grayscale(100%) brightness(140%) saturate(100%);
-  fill: grey;
-}
-
-    #Socials {
-      @apply flex flex-row mr-[20px] gap-x-4 float-right;
-    }
-}
-</style>
+ </div>
+</footer>

src/env.d.ts

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