From e456de6a0f5dd4e76374a0050db040890902830e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AE=B5=E6=9E=AB?=
 <128354383+laogou717@users.noreply.github.com>
Date: Thu, 12 Sep 2024 13:34:49 +0800
Subject: [PATCH] Create NotionIcon.js

---
 themes/heo/components/NotionIcon.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 themes/heo/components/NotionIcon.js

diff --git a/themes/heo/components/NotionIcon.js b/themes/heo/components/NotionIcon.js
new file mode 100644
index 00000000..c6d5bed1
--- /dev/null
+++ b/themes/heo/components/NotionIcon.js
@@ -0,0 +1,22 @@
+import LazyImage from '@/components/LazyImage'
+
+/**
+ * notion的图标icon
+ * 可能是emoji 可能是 svg 也可能是 图片
+ * @returns
+ */
+const NotionIcon = ({ icon, className = 'w-8 h-8 my-auto inline mr-1' }) => {
+  if (!icon) {
+    return <></>
+  }
+
+  if (icon.startsWith('http') || icon.startsWith('data:')) {
+    // 这里优先使用传入的 className
+    return <LazyImage src={icon} className={className} />
+  }
+
+  // 对于 emoji 或 svg，设置默认 className，也可以传递不同的样式
+  return <span className={`inline-block ${className}`}>{icon}</span>
+}
+
+export default NotionIcon