@sj-distributor/react-iconfont-cli 2.6.0 → 2.6.2

package/README.md

@@ -177,7 +177,11 @@ const handleIconClick = () => {
 />;
 ```
 
-`buttonProps` 用于设置外层按钮的属性；`className`、`style` 等普通图标属性仍应用到内部 SVG。按钮仅默认设置 `type="button"`，不附带布局、尺寸、颜色或重置样式，调用方可以使用普通 CSS、CSS Modules 或 Tailwind CSS 自行控制。原生按钮已经支持 Enter/Space 键盘操作，因此不需要额外添加 `onKeyDown`。
+`buttonProps` 用于设置外层按钮的属性；`className`、`style` 等普通图标属性仍应用到内部 SVG。按钮默认为 `type="button"`，并进行最小样式重置：背景透明、无边框、无内边距、鼠标指针为 `pointer`，同时移除浏览器原生按钮外观。
+
+除此之外不附带布局、尺寸或颜色样式，调用方可以使用普通 CSS、CSS Modules 或 Tailwind CSS 自行控制。需要覆盖重置项时，可通过 `buttonProps.style` 设置。
+
+原生按钮已经支持 Enter/Space 键盘操作，因此不需要额外添加 `onKeyDown`。
 
 交互模式下，顶层的 `aria-*`、`role` 和 `tabIndex` 会自动应用到外层按钮，不会留在已隐藏的 SVG 上。除 `aria-label` 和 `onClick` 外，也可以通过 `buttonProps` 设置按钮属性；同名属性以 `buttonProps` 为准。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sj-distributor/react-iconfont-cli",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "main": "index.js",
   "keywords": [
     "iconfont",

package/templates/Icon.js.template

@@ -4,6 +4,14 @@ import React from 'react';
 #imports#
 #exports#
 
+const DEFAULT_BUTTON_STYLE = {
+  appearance: 'none',
+  background: 'transparent',
+  border: 0,
+  cursor: 'pointer',
+  padding: 0,
+};
+
 const splitInteractiveProps = (props) => {
   const buttonA11yProps = {};
   const iconProps = {};
@@ -54,8 +62,11 @@ const IconFont = ({
     return icon;
   }
 
-  const { type = 'button', ...restButtonProps } = buttonProps;
+  const { style: buttonStyle, type = 'button', ...restButtonProps } = buttonProps;
   delete restButtonProps.dangerouslySetInnerHTML;
+  const style = buttonStyle
+    ? { ...DEFAULT_BUTTON_STYLE, ...buttonStyle }
+    : DEFAULT_BUTTON_STYLE;
   const accessibilityLabel =
     typeof ariaLabel === 'string' && ariaLabel.trim()
       ? ariaLabel.trim()
@@ -68,6 +79,7 @@ const IconFont = ({
       type={type}
       aria-label={accessibilityLabel}
       onClick={onClick}
+      style={style}
     >
       {icon}
     </button>

package/templates/Icon.tsx.template

@@ -1,7 +1,7 @@
 /* tslint:disable */
 /* eslint-disable */
 
-import #reactName#{ ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, ReactElement, SVGAttributes } from 'react';
+import #reactName#{ ButtonHTMLAttributes, CSSProperties, FunctionComponent, MouseEventHandler, ReactElement, SVGAttributes } from 'react';
 #imports#
 #exports#
 
@@ -20,6 +20,14 @@ interface Props extends IconProps {
   buttonProps?: ButtonProps;
 }
 
+const DEFAULT_BUTTON_STYLE: CSSProperties = {
+  appearance: 'none',
+  background: 'transparent',
+  border: 0,
+  cursor: 'pointer',
+  padding: 0,
+};
+
 const splitInteractiveProps = (props: IconProps) => {
   const source = props as Record<string, unknown>;
   const buttonA11yProps: Record<string, unknown> = {};
@@ -74,9 +82,12 @@ const IconFont: FunctionComponent<Props> = ({
     return icon;
   }
 
-  const { type = 'button', ...restButtonProps } = buttonProps;
+  const { style: buttonStyle, type = 'button', ...restButtonProps } = buttonProps;
   const safeButtonProps = restButtonProps as ButtonHTMLAttributes<HTMLButtonElement>;
   delete safeButtonProps.dangerouslySetInnerHTML;
+  const style = buttonStyle
+    ? { ...DEFAULT_BUTTON_STYLE, ...buttonStyle }
+    : DEFAULT_BUTTON_STYLE;
   const accessibilityLabel =
     typeof ariaLabel === 'string' && ariaLabel.trim()
       ? ariaLabel.trim()
@@ -89,6 +100,7 @@ const IconFont: FunctionComponent<Props> = ({
       type={type}
       aria-label={accessibilityLabel}
       onClick={onClick}
+      style={style}
     >
       {icon}
     </button>