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

package/README.md

@@ -155,6 +155,42 @@ export const App = () => {
 </div>
 ```
 
+### 点击交互
+
+不要直接把 SVG 图标作为交互控件。SVG 本身不是原生按钮，直接使用时还需要自行实现焦点、键盘操作、控件角色和可访问名称。
+
+汇总 `IconFont` 组件检测到 `onClick` 后，会自动渲染一个原生 `button`，并将内部 SVG 标记为装饰元素；没有 `onClick` 时仍然只渲染 SVG：
+
+```tsx
+const handleIconClick = () => {
+  console.log("icon clicked");
+};
+
+<IconFont
+  name="alipay"
+  aria-label="打开支付宝"
+  onClick={handleIconClick}
+  buttonProps={{
+    className: "icon-button",
+    disabled: false,
+  }}
+/>;
+```
+
+`buttonProps` 用于设置外层按钮的属性；`className`、`style` 等普通图标属性仍应用到内部 SVG。按钮仅默认设置 `type="button"`，不附带布局、尺寸、颜色或重置样式，调用方可以使用普通 CSS、CSS Modules 或 Tailwind CSS 自行控制。原生按钮已经支持 Enter/Space 键盘操作，因此不需要额外添加 `onKeyDown`。
+
+交互模式下，顶层的 `aria-*`、`role` 和 `tabIndex` 会自动应用到外层按钮，不会留在已隐藏的 SVG 上。除 `aria-label` 和 `onClick` 外，也可以通过 `buttonProps` 设置按钮属性；同名属性以 `buttonProps` 为准。
+
+调用方自定义按钮样式时，应保留清晰的键盘焦点状态，并根据适用的 WCAG 等级确保足够的点击区域和间距。
+
+按需引入的单图标组件始终只渲染 SVG。如需交互，请由调用方显式包裹按钮：
+
+```tsx
+<button type="button" onClick={handleIconClick} aria-label="打开支付宝">
+  <IconAlipay aria-hidden="true" />
+</button>
+```
+
 ## 无障碍支持（WCAG）
 
 无障碍属性添加在最终生成的单图标 SVG 上。重新运行生成命令后，现有调用无需修改即可获得默认的可访问名称。

package/libs/generateComponent.js

@@ -36,7 +36,8 @@ var generateComponent = function (data, config) {
         names.push(iconIdAfterTrim);
         cases += "".concat((0, whitespace_1.whitespace)(4), "case '").concat(iconIdAfterTrim, "':\n");
         imports.push(componentName);
-        cases += "".concat((0, whitespace_1.whitespace)(6), "return <").concat(componentName, " {...rest} />;\n");
+        cases += "".concat((0, whitespace_1.whitespace)(6), "icon = <").concat(componentName, " {...iconProps} />;\n");
+        cases += "".concat((0, whitespace_1.whitespace)(6), "break;\n");
         singleFile = (0, getTemplate_1.getTemplate)("SingleIcon" + jsxExtension);
         singleFile = (0, replace_1.replaceSize)(singleFile, config.default_icon_size);
         singleFile = (0, replace_1.replaceAriaLabel)(singleFile, getAccessibleLabel(iconIdAfterTrim));

package/package.json

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

package/templates/Icon.d.ts.template

@@ -1,12 +1,16 @@
 /* eslint-disable */
 
-import { SVGAttributes, FunctionComponent } from 'react';
+import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, SVGAttributes } from 'react';
 #exports#
 
-interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'children' | 'dangerouslySetInnerHTML' | 'onClick'>;
+
+interface Props extends Omit<SVGAttributes<SVGElement>, 'color' | 'onClick'> {
   name: '#names#';
   size?: number;
   color?: string | string[];
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  buttonProps?: ButtonProps;
 }
 
 declare const IconFont: FunctionComponent<Props>;

package/templates/Icon.js.template

@@ -4,12 +4,74 @@ import React from 'react';
 #imports#
 #exports#
 
-const IconFont = ({ name, ...rest }) => {
+const splitInteractiveProps = (props) => {
+  const buttonA11yProps = {};
+  const iconProps = {};
+
+  Object.keys(props).forEach((propName) => {
+    if (
+      propName.indexOf('aria-') === 0 ||
+      propName === 'role' ||
+      propName === 'tabIndex'
+    ) {
+      buttonA11yProps[propName] = props[propName];
+    } else {
+      iconProps[propName] = props[propName];
+    }
+  });
+
+  return { buttonA11yProps, iconProps };
+};
+
+const getAccessibleLabel = (iconName) => {
+  const label = iconName
+    .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+    .replace(/[-_.=+#@!~*]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return label || iconName;
+};
+
+const IconFont = ({
+  name,
+  onClick,
+  buttonProps = {},
+  'aria-label': ariaLabel,
+  ...rest
+}) => {
+  const interactiveProps = splitInteractiveProps(rest);
+  const iconProps = onClick
+    ? { ...interactiveProps.iconProps, 'aria-hidden': true }
+    : { ...rest, 'aria-label': ariaLabel };
+  let icon = null;
+
   switch (name) {
 #cases#
   }
 
-  return null;
+  if (!icon || !onClick) {
+    return icon;
+  }
+
+  const { type = 'button', ...restButtonProps } = buttonProps;
+  delete restButtonProps.dangerouslySetInnerHTML;
+  const accessibilityLabel =
+    typeof ariaLabel === 'string' && ariaLabel.trim()
+      ? ariaLabel.trim()
+      : getAccessibleLabel(name);
+
+  return (
+    <button
+      {...interactiveProps.buttonA11yProps}
+      {...restButtonProps}
+      type={type}
+      aria-label={accessibilityLabel}
+      onClick={onClick}
+    >
+      {icon}
+    </button>
+  );
 };
 
 export default IconFont;

package/templates/Icon.tsx.template

@@ -1,24 +1,98 @@
 /* tslint:disable */
 /* eslint-disable */
 
-import #reactName#{ SVGAttributes, FunctionComponent } from 'react';
+import #reactName#{ ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, ReactElement, SVGAttributes } from 'react';
 #imports#
 #exports#
 
 export type IconNames = '#names#';
 
-interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
-  name: IconNames;
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'children' | 'dangerouslySetInnerHTML' | 'onClick'>;
+
+type IconProps = Omit<SVGAttributes<SVGElement>, 'color' | 'onClick'> & {
   size?: number;
   color?: string | string[];
+};
+
+interface Props extends IconProps {
+  name: IconNames;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  buttonProps?: ButtonProps;
 }
 
-const IconFont: FunctionComponent<Props> = ({ name, ...rest }) => {
+const splitInteractiveProps = (props: IconProps) => {
+  const source = props as Record<string, unknown>;
+  const buttonA11yProps: Record<string, unknown> = {};
+  const iconProps: Record<string, unknown> = {};
+
+  Object.keys(source).forEach((propName) => {
+    if (
+      propName.indexOf('aria-') === 0 ||
+      propName === 'role' ||
+      propName === 'tabIndex'
+    ) {
+      buttonA11yProps[propName] = source[propName];
+    } else {
+      iconProps[propName] = source[propName];
+    }
+  });
+
+  return {
+    buttonA11yProps: buttonA11yProps as ButtonHTMLAttributes<HTMLButtonElement>,
+    iconProps: iconProps as IconProps,
+  };
+};
+
+const getAccessibleLabel = (iconName: string): string => {
+  const label = iconName
+    .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+    .replace(/[-_.=+#@!~*]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return label || iconName;
+};
+
+const IconFont: FunctionComponent<Props> = ({
+  name,
+  onClick,
+  buttonProps = {},
+  'aria-label': ariaLabel,
+  ...rest
+}) => {
+  const interactiveProps = splitInteractiveProps(rest);
+  const iconProps = onClick
+    ? { ...interactiveProps.iconProps, 'aria-hidden': true }
+    : { ...rest, 'aria-label': ariaLabel };
+  let icon: ReactElement | null = null;
+
   switch (name) {
 #cases#
   }
 
-  return null;
+  if (!icon || !onClick) {
+    return icon;
+  }
+
+  const { type = 'button', ...restButtonProps } = buttonProps;
+  const safeButtonProps = restButtonProps as ButtonHTMLAttributes<HTMLButtonElement>;
+  delete safeButtonProps.dangerouslySetInnerHTML;
+  const accessibilityLabel =
+    typeof ariaLabel === 'string' && ariaLabel.trim()
+      ? ariaLabel.trim()
+      : getAccessibleLabel(name);
+
+  return (
+    <button
+      {...interactiveProps.buttonA11yProps}
+      {...safeButtonProps}
+      type={type}
+      aria-label={accessibilityLabel}
+      onClick={onClick}
+    >
+      {icon}
+    </button>
+  );
 };
 
 export default IconFont;