@grafana/ui/dist/esm/components/Icon/Icon.mjs

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { css, cx } from '@emotion/css';
import { useState, useRef, useCallback, memo, forwardRef } from 'react';
import SVG from 'react-inlinesvg';
import { isIconName } from '@grafana/data';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { spin } from '../../utils/keyframes.mjs';
import { getSvgSize, getIconPath } from './utils.mjs';

"use strict";
const getIconStyles = (theme) => {
  return {
    icon: css({
      display: "inline-block",
      fill: "currentColor",
      flexShrink: 0,
      label: "Icon",
      // line-height: 0; is needed for correct icon alignment in Safari
      lineHeight: 0,
      verticalAlign: "middle"
    }),
    orange: css({
      fill: theme.v1.palette.orange
    }),
    spin: css({
      [theme.transitions.handleMotion("no-preference", "reduce")]: {
        animation: `${spin} 2s infinite linear`
      }
    })
  };
};
function useIconWorkaround(name) {
  const [, setForceUpdate] = useState(0);
  const isLoadingRef = useRef(false);
  const currentNameRef = useRef(name);
  const bufferedNameRef = useRef(null);
  let nameToUse = name;
  if (isLoadingRef.current && name !== currentNameRef.current) {
    nameToUse = currentNameRef.current;
    bufferedNameRef.current = name;
  } else if (!isLoadingRef.current && name !== currentNameRef.current) {
    currentNameRef.current = name;
    bufferedNameRef.current = null;
    isLoadingRef.current = true;
  }
  const handleLoad = useCallback(() => {
    isLoadingRef.current = false;
    if (bufferedNameRef.current) {
      currentNameRef.current = bufferedNameRef.current;
      bufferedNameRef.current = null;
      setForceUpdate((n) => n + 1);
    }
  }, []);
  return { nameToUse, handleLoad };
}
const Icon = memo(
  forwardRef(
    ({ size = "md", type = "default", name: nameProp, className, style, title = "", ...rest }, ref) => {
      const styles = useStyles2(getIconStyles);
      const { nameToUse: name, handleLoad } = useIconWorkaround(nameProp);
      if (!isIconName(name)) {
        console.warn("Icon component passed an invalid icon name", name);
      }
      const iconName = name === "fa fa-spinner" ? "spinner" : name;
      const svgSize = getSvgSize(size);
      const svgHgt = svgSize;
      const svgWid = name.startsWith("gf-bar-align") ? 16 : name.startsWith("gf-interp") ? 30 : svgSize;
      const svgPath = getIconPath(iconName, type);
      const composedClassName = cx(
        styles.icon,
        className,
        type === "mono" ? { [styles.orange]: name === "favorite" } : "",
        {
          [styles.spin]: iconName === "spinner"
        }
      );
      return (
        // @ts-expect-error react-inlinesvg@4.3.0 return type includes bigint, which isn't in @types/react@18's ReactNode. Remove when we update @types/react.
        /* @__PURE__ */ jsx(
          SVG,
          {
            "data-testid": `icon-${iconName}`,
            "aria-hidden": rest.tabIndex === void 0 && !title && !rest["aria-label"] && !rest["aria-labelledby"] && !rest["aria-describedby"],
            onLoad: handleLoad,
            onError: handleLoad,
            innerRef: ref,
            src: svgPath,
            width: svgWid,
            height: svgHgt,
            title,
            className: composedClassName,
            style,
            loader: /* @__PURE__ */ jsx(
              "svg",
              {
                className: cx(
                  css({
                    width: svgWid,
                    height: svgHgt
                  }),
                  composedClassName
                )
              }
            ),
            ...rest
          }
        )
      );
    }
  )
);
Icon.displayName = "Icon";

export { Icon };
//# sourceMappingURL=Icon.mjs.map