All files / src/icon Icon.tsx

100% Statements 9/9
100% Branches 4/4
100% Functions 1/1
100% Lines 9/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56                                                            59x 359x 359x 359x                   359x     359x     359x 1x     358x    
import React, { forwardRef, Ref, HTMLAttributes } from "react";
import classNames from "classnames";
import { Tooltip } from "../tooltip";
import { useConfig } from "../_util/config-context";
 
export interface IconProps extends HTMLAttributes<HTMLElement> {
  /** 图标类型 */
  type: string;
 
  /**
   * 默认为 16x16 图标
   *
   * 状态图标支持配置为 32x32,包括:`success`、`infowaiting`、`infoblue` 和 `error`
   *
   * @default "default"
   */
  size?: "default" | "s" | "l";
 
  /**
   * 是否渲染为超链接
   * @default false
   */
  link?: boolean;
 
  /**
   * 在图标上添加 Tooltip 的快捷方式,详见 [Tooltip](/component/tooltip) 组件
   */
  tooltip?: React.ReactNode;
}
 
export const Icon = forwardRef((props: IconProps, ref: Ref<HTMLElement>) => {
  const { classPrefix } = useConfig();
  const { type, size, className, tooltip, link, ...htmlProps } = props;
  const iconClassName = classNames(
    className,
    `${classPrefix}-icon`,
    `${classPrefix}-icon-${type}`,
    {
      "size-s": size === "s",
      "size-l": size === "l",
    }
  );
 
  const Parent = link ? "a" : "i";
 
  const icon = (
    <Parent ref={ref as any} className={iconClassName} {...htmlProps} />
  );
 
  if (tooltip) {
    return <Tooltip title={tooltip}>{icon}</Tooltip>;
  }
 
  return icon;
});