feat(ButtonIcon): implement clickable icon component

src/components/ButtonIcon/ButtonIcon.jsx

@@ -0,0 +1,39 @@
+import PropTypes from "prop-types";
+import React from "react";
+import Icon from "../Icon/Icon.jsx";
+import { classNames } from "../../utils";
+import Spinner from "../Spinner/Spinner.jsx";
+import styles from "./styles.css";
+
+const ButtonIcon = ({
+  type,
+  className,
+  style,
+  disabled,
+  onClick,
+  loading,
+  viewBox,
+  ...props
+}) => (
+  <button
+    type="button"
+    className={classNames(styles.buttonIcon, className)}
+    style={style}
+    disabled={disabled}
+    onClick={onClick}
+    {...props}>
+    {loading ? <Spinner /> : <Icon type={type} viewBox={viewBox} />}
+  </button>
+);
+
+ButtonIcon.propTypes = {
+  type: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  viewBox: PropTypes.string,
+  style: PropTypes.object,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  loading: PropTypes.bool,
+};
+
+export default ButtonIcon;

src/components/ButtonIcon/styles.css

@@ -0,0 +1,21 @@
+.buttonIcon {
+  border: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.5rem;
+  width: 2.4rem;
+  height: 2.4rem;
+  padding: 0.3rem;
+  cursor: pointer;
+  background: var(--color-white);
+  box-shadow: 0 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.12);
+}
+
+.buttonIcon:hover {
+  box-shadow: 0 0.1rem 0.4rem 0 rgba(0, 0, 0, 0.24);
+}
+
+.buttonIcon:active {
+  box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.24);
+}

src/docs/buttonicon.mdx

@@ -0,0 +1,30 @@
+---
+name: ButtonIcon
+menu: Components
+route: /components/buttonicon
+---
+
+import { Playground, Props } from "docz";
+import { ButtonIcon } from "../index";
+
+# ButtonIcon
+
+## Properties
+
+<Props of={ButtonIcon} />
+
+## Usage
+
+### Normal
+
+<Playground>
+  <ButtonIcon type="mail" />
+  <br />
+  <ButtonIcon type="link" />
+  <br />
+  <ButtonIcon type="chart" />
+  <br />
+  <ButtonIcon type="markdown" viewBox="0 0 208 128" />
+  <br />
+  <ButtonIcon type="search" />
+</Playground>

src/index.js

@@ -46,6 +46,7 @@ export { default as DatePicker } from "./components/Datepicker/Datepicker.jsx";
 export { default as Slider } from "./components/Slider/Slider.jsx";
 export { default as Paginator } from "./components/Paginator/Paginator.jsx";
 export { default as TextHighlighted } from "./components/TextHighlighted/TextHighlighted.jsx";
+export { default as ButtonIcon } from "./components/ButtonIcon/ButtonIcon.jsx";
 export * from "./hooks";
 export * from "./theme";
 export * from "./utils";