icon 替换

astro.config.mjs

@@ -1,11 +1,12 @@
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
-
 import tailwind from '@astrojs/tailwind';
 
+import react from "@astrojs/react";
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://coderfee.com',
-  integrations: [mdx(), sitemap(), tailwind()],
-});
+  integrations: [mdx(), sitemap(), tailwind(), react()]
+});

package.json

@@ -15,11 +15,16 @@
     "@astrojs/rss": "^3.0.0",
     "@astrojs/sitemap": "^3.0.3",
     "@astrojs/tailwind": "^5.0.2",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
     "astro": "^3.6.4",
     "lxgw-wenkai-lite-webfont": "^1.7.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "tailwindcss": "^3.3.5"
   },
   "devDependencies": {
+    "@iconify/react": "^4.1.1",
     "@tailwindcss/typography": "^0.5.10",
     "prettier": "^3.1.0"
   }

src/components/Header.astro

@@ -3,10 +3,10 @@ import HeaderLink from './HeaderLink.astro';
 import { SITE_TITLE } from '../consts';
 ---
 
-<header class="py-4 border-b">
+<header class="p-4 border-b">
   <div class="max-w-prose mx-auto flex justify-between items-center">
     <a href="/">
-      <h2 class="text-accent-1 font-bold text-xl">{SITE_TITLE}</h2>
+      <h2 class="font-bold text-xl">{SITE_TITLE}</h2>
     </a>
     <nav class="space-x-4">
       <HeaderLink href="https://twitter.com/coderfe" target="_blank">Twitter</HeaderLink>

src/components/HeaderLink.astro

@@ -11,11 +11,11 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '');
 
 <style>
   .active {
-    @apply text-accent-1 font-bold relative;
+    @apply font-bold relative;
   }
   .active::after {
     content: '';
-    @apply absolute top-full left-0 w-full h-1 bg-primary;
+    @apply absolute top-full left-0 w-full h-1;
   }
 </style>
 <a href={href} class:list={[className, { active: isActive }]} {...props}>

src/global/style.css

@@ -1,8 +1,8 @@
 html,
 body {
-  @apply bg-bg-1 font-sans text-text-1;
+  @apply bg-slate-50 font-sans text-black;
 }
 
 main {
-  @apply min-w-[360px] w-full leading-normal;
+  @apply min-w-[360px] w-full px-4 leading-normal;
 }

src/layouts/BlogPost.astro

@@ -4,8 +4,8 @@ import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import FormattedDate from '../components/FormattedDate.astro';
-import Emoji from '../components/Emoji.astro';
 import { renderTags } from '../helper';
+import { Icon } from '@iconify/react';
 
 type Props = CollectionEntry<'blog'>['data'];
 
@@ -22,15 +22,15 @@ const { title, tldr, date, tags, heroImage } = Astro.props;
     <main class="mx-auto py-4 prose">
       <article>
         <h1>{title}</h1>
-        <div class="space-x-4">
-          <span>
-            <Emoji symbol="📅" />
+        <div class="flex gap-8">
+          <span class="flex items-center gap-1">
+            <Icon icon="tabler:calendar" client:load />
             <FormattedDate date={date} />
           </span>
           {
             tags && (
-              <span>
-                <Emoji symbol="🏷️" />
+              <span class="flex items-center gap-1">
+                <Icon icon="tabler:tag" client:load />
                 <span class="space-x-1" set:html={renderTags(tags)} />
               </span>
             )

src/pages/index.astro

@@ -1,12 +1,12 @@
 ---
 import { getCollection } from 'astro:content';
 import BaseHead from '../components/BaseHead.astro';
-import Emoji from '../components/Emoji.astro';
 import Footer from '../components/Footer.astro';
 import FormattedDate from '../components/FormattedDate.astro';
 import Header from '../components/Header.astro';
 import { SITE_DESCRIPTION, SITE_TITLE } from '../consts';
 import { renderTags } from '../helper';
+import { Icon } from '@iconify/react';
 
 const posts = (await getCollection('blog')).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 ---
@@ -18,23 +18,23 @@ const posts = (await getCollection('blog')).sort((a, b) => b.data.date.valueOf()
   </head>
   <body>
     <Header />
-    <main class="py-4 space-y-6 max-w-prose mx-auto">
+    <main class="py-4 space-y-8 max-w-prose mx-auto">
       {
         posts.map((post) => (
           <section>
-            <div class="text-sm space-x-4">
-              <span>
-                <Emoji symbol="📅" />
+            <div class="text-sm flex gap-4">
+              <span class="flex items-center gap-1">
+                <Icon icon="tabler:calendar" client:load />
                 <FormattedDate date={post.data.date} />
               </span>
               {post.data.tags && (
-                <span>
-                  <Emoji symbol="🏷️" />
+                <span class="flex items-center gap-1">
+                  <Icon icon="tabler:tag" client:load />
                   <span class="space-x-1" set:html={renderTags(post.data.tags)} />
                 </span>
               )}
             </div>
-            <div class="text-base font-bold mt-1 leading-relaxed underline underline-offset-4 decoration-primary decoration-2 transition-all duration-300 hover:text-primary hover:font-bold">
+            <div class="text-base font-bold mt-1 leading-relaxed underline underline-offset-4 decoration-black decoration-2 transition-all duration-300 hover:text-primary hover:font-bold">
               <a href={`/blog/${post.slug}`}>{post.data.title}</a>
             </div>
           </section>

tailwind.config.cjs

@@ -3,15 +3,5 @@ const defaultTheme = require('tailwindcss/defaultTheme');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  theme: {
-    extend: {
-      colors: {
-        primary: '#33b270',
-        'accent-1': '#ffca21',
-        'text-1': '#242f5a',
-        'bg-1': '#fdfdff',
-      },
-    },
-  },
   plugins: [require('@tailwindcss/typography')],
 };

tsconfig.json

@@ -1,6 +1,8 @@
 {
   "extends": "astro/tsconfigs/base",
   "compilerOptions": {
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   }
-}
+}