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

Grafana Components Library

{"version":3,"file":"Icon.mjs","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport * as React from 'react';\nimport SVG from 'react-inlinesvg';\n\nimport { GrafanaTheme2, isIconName } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName, IconType, IconSize } from '../../types/icon';\nimport { spin } from '../../utils/keyframes';\n\nimport { getIconRoot, getIconSubDir, getSvgSize } from './utils';\n\nexport interface IconProps extends Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> {\n  name: IconName;\n  size?: IconSize;\n  type?: IconType;\n  /**\n   * Give your icon a semantic meaning. The icon will be hidden from screen readers, unless this prop or an aria-label is provided.\n   */\n  title?: string;\n}\n\nconst getIconStyles = (theme: GrafanaTheme2) => {\n  return {\n    icon: css({\n      display: 'inline-block',\n      fill: 'currentColor',\n      flexShrink: 0,\n      label: 'Icon',\n      // line-height: 0; is needed for correct icon alignment in Safari\n      lineHeight: 0,\n      verticalAlign: 'middle',\n    }),\n    orange: css({\n      fill: theme.v1.palette.orange,\n    }),\n    spin: css({\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        animation: `${spin} 2s infinite linear`,\n      },\n    }),\n  };\n};\n\nexport const Icon = React.forwardRef<SVGElement, IconProps>(\n  ({ size = 'md', type = 'default', name, className, style, title = '', ...rest }, ref) => {\n    const styles = useStyles2(getIconStyles);\n\n    if (!isIconName(name)) {\n      console.warn('Icon component passed an invalid icon name', name);\n    }\n\n    // handle the deprecated 'fa fa-spinner'\n    const iconName: IconName = name === 'fa fa-spinner' ? 'spinner' : name;\n\n    const iconRoot = getIconRoot();\n    const svgSize = getSvgSize(size);\n    const svgHgt = svgSize;\n    const svgWid = name.startsWith('gf-bar-align') ? 16 : name.startsWith('gf-interp') ? 30 : svgSize;\n    const subDir = getIconSubDir(iconName, type);\n    const svgPath = `${iconRoot}${subDir}/${iconName}.svg`;\n\n    const composedClassName = cx(\n      styles.icon,\n      className,\n      type === 'mono' ? { [styles.orange]: name === 'favorite' } : '',\n      {\n        [styles.spin]: iconName === 'spinner',\n      }\n    );\n\n    return (\n      <SVG\n        aria-hidden={\n          rest.tabIndex === undefined &&\n          !title &&\n          !rest['aria-label'] &&\n          !rest['aria-labelledby'] &&\n          !rest['aria-describedby']\n        }\n        innerRef={ref}\n        src={svgPath}\n        width={svgWid}\n        height={svgHgt}\n        title={title}\n        className={composedClassName}\n        style={style}\n        // render an empty div with the correct dimensions while loading\n        // this prevents content layout shift whilst the icon asynchronously loads\n        // which happens even if the icon is in the cache(!)\n        loader={\n          <div\n            className={cx(\n              css({\n                width: svgWid,\n                height: svgHgt,\n              }),\n              composedClassName\n            )}\n          />\n        }\n        {...rest}\n      />\n    );\n  }\n);\n\nIcon.displayName = 'Icon';\n"],"names":[],"mappings":"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"}