feat(components): 添加 ActionIcon 组件

- 实现了一个新的 ActionIcon 组件,用于在界面上显示可点击的图标
- 组件支持自定义图标、点击事件和样式类
- 使用 SolidJS 和 clsx 库来构建组件
This commit is contained in:
Vixalie
2025-08-05 13:18:01 +08:00
parent c2723a793b
commit e7c9b700a6

View File

@@ -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;