v4 upgrade

astro.config.mjs

@@ -2,9 +2,10 @@ import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
+import icon from "astro-icon";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://astroship.web3templates.com",
-  integrations: [tailwind(), mdx(), sitemap()],
+  integrations: [tailwind(), mdx(), sitemap(), icon()],
 });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astroship",
   "type": "module",
-  "version": "0.0.2",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -11,16 +11,20 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^1.1.5",
-    "@astrojs/sitemap": "^3.0.3",
-    "@astrojs/tailwind": "^5.0.2",
-    "@fontsource-variable/inter": "^5.0.15",
-    "@tailwindcss/typography": "^0.5.10",
-    "astro": "^3.5.5",
-    "astro-icon": "^0.8.1",
-    "astro-navbar": "^2.3.0",
-    "astro-seo": "^0.8.0",
-    "sharp": "^0.33.0",
-    "tailwindcss": "^3.3.5"
+    "@astrojs/mdx": "^3.0.1",
+    "@astrojs/sitemap": "^3.1.5",
+    "@astrojs/tailwind": "^5.1.0",
+    "@fontsource-variable/bricolage-grotesque": "^5.0.6",
+    "@fontsource-variable/inter": "^5.0.18",
+    "@iconify-json/bx": "^1.1.10",
+    "@iconify-json/simple-icons": "^1.1.102",
+    "@iconify-json/uil": "^1.1.8",
+    "@tailwindcss/typography": "^0.5.13",
+    "astro": "^4.8.7",
+    "astro-icon": "^1.1.0",
+    "astro-navbar": "^2.3.2",
+    "astro-seo": "^0.8.3",
+    "sharp": "^0.33.4",
+    "tailwindcss": "^3.4.3"
   }
 }

src/components/features.astro

@@ -1,6 +1,6 @@
 ---
 // @ts-ignore
-import { Icon } from "astro-icon";
+import { Icon } from "astro-icon/components";
 
 const features = [
   {

src/components/hero.astro

@@ -2,7 +2,7 @@
 import { Picture } from "astro:assets";
 import heroImage from "assets/hero.png";
 import Link from "@components/ui/link.astro";
-import { Icon } from "astro-icon";
+import { Icon } from "astro-icon/components";
 ---
 
 <main

src/components/logos.astro

@@ -1,16 +1,18 @@
 ---
 // @ts-ignore
-import { Icon } from "astro-icon";
+import { Icon } from "astro-icon/components";
 ---
 
 <div class="mt-24">
   <h2 class="text-center text-slate-500">Works with your technologies</h2>
   <div class="flex gap-8 md:gap-20 items-center justify-center mt-10 flex-wrap">
-    <Icon class="h-8 md:h-12" name="simple-icons:react" />
-    <Icon class="h-8 md:h-12" name="simple-icons:svelte" />
-    <Icon class="h-8 md:h-14" name="simple-icons:tailwindcss" />
-    <Icon class="h-8 md:h-16" name="simple-icons:alpinedotjs" />
-    <Icon class="h-8 md:h-12" name="simple-icons:vercel" />
-    <Icon class="h-8 md:h-12" name="simple-icons:astro" />
+
+    <Icon class="size-8 md:size-12" name="simple-icons:react" />
+    <Icon class="size-8 md:size-12" name="simple-icons:svelte" />
+    <Icon class="size-8 md:size-12" name="simple-icons:astro" />
+    <Icon class="size-8 md:size-16" name="simple-icons:tailwindcss" />
+    <Icon class="size-8 md:size-16" name="simple-icons:alpinedotjs" />
+    <Icon class="size-8 md:size-12" name="simple-icons:vercel" />
+
   </div>
 </div>

src/layouts/Layout.astro

@@ -3,6 +3,9 @@ import { SEO } from "astro-seo";
 import Footer from "@components/footer.astro";
 import Navbar from "@components/navbar/navbar.astro";
 import "@fontsource-variable/inter/index.css";
+import '@fontsource-variable/bricolage-grotesque';
+
+
 
 export interface Props {
   title: string;

src/pages/contact.astro

@@ -3,7 +3,7 @@ import Contactform from "@components/contactform.astro";
 import Container from "@components/container.astro";
 import Sectionhead from "@components/sectionhead.astro";
 import Layout from "@layouts/Layout.astro";
-import { Icon } from "astro-icon";
+import { Icon } from "astro-icon/components";
 ---
 
 <Layout title="Contact">

tailwind.config.cjs

@@ -5,7 +5,12 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["Inter Variable", "Inter", ...defaultTheme.fontFamily.sans],
+        sans: [
+          "Bricolage Grotesque Variable",
+          "Inter Variable",
+          "Inter",
+          ...defaultTheme.fontFamily.sans,
+        ],
       },
     },
   },