From e7c9b700a67a5e2ebbd9e4fe21b98036a4468bfa Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Tue, 5 Aug 2025 13:18:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=B7=BB=E5=8A=A0=20Action?=
 =?UTF-8?q?Icon=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 实现了一个新的 ActionIcon 组件，用于在界面上显示可点击的图标
- 组件支持自定义图标、点击事件和样式类
- 使用 SolidJS 和 clsx 库来构建组件
---
 src/components/ActionIcon.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/components/ActionIcon.tsx

diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
new file mode 100644
index 0000000..e521762
--- /dev/null
+++ b/src/components/ActionIcon.tsx
@@ -0,0 +1,24 @@
+import { Icon, IconifyIconProps } from '@iconify-icon/solid';
+import cx from 'clsx';
+import { Component, JSX } from 'solid-js';
+
+interface ActionIconProps {
+  icon: IconifyIconProps['icon'];
+  onClick?: () => void;
+  class?: JSX.HTMLAttributes<HTMLButtonElement>['class'];
+}
+
+const ActionIcon: Component<ActionIconProps> = (props) => {
+  const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (e) => {
+    e.stopPropagation();
+    props.onClick?.();
+  };
+
+  return (
+    <button class={cx('p-2 rounded-sm', props.class)} onClick={handleClick}>
+      <Icon icon={props.icon} class="text-base/[1] stroke-1" />
+    </button>
+  );
+};
+
+export default ActionIcon;