Icon() — react Function Reference

Architecture documentation for the Icon() function in Icon.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ Icon() — react Function Reference

Dependency Diagram

graph TD
  f23861b1_8332_6fa9_2862_ddd6110f3776["Icon()"]
  21af3248_c15c_a61c_1f5b_7409a91b945c["Icon.js"]
  f23861b1_8332_6fa9_2862_ddd6110f3776 -->|defined in| 21af3248_c15c_a61c_1f5b_7409a91b945c
  style f23861b1_8332_6fa9_2862_ddd6110f3776 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Icon.js lines 39–118

export default function Icon({
  className = '',
  title = '',
  type,
  ...props
}: Props): React.Node {
  let pathData = null;
  let viewBox = '0 0 24 24';
  switch (type) {
    case 'arrow':
      pathData = PATH_ARROW;
      break;
    case 'bug':
      pathData = PATH_BUG;
      break;
    case 'code':
      pathData = PATH_CODE;
      break;
    case 'components':
      pathData = PATH_COMPONENTS;
      break;
    case 'copy':
      pathData = PATH_COPY;
      break;
    case 'error':
      pathData = PATH_ERROR;
      break;
    case 'facebook':
      pathData = PATH_FACEBOOK;
      break;
    case 'flame-chart':
      pathData = PATH_FLAME_CHART;
      break;
    case 'profiler':
      pathData = PATH_PROFILER;
      break;
    case 'ranked-chart':
      pathData = PATH_RANKED_CHART;
      break;
    case 'timeline':
      pathData = PATH_SCHEDULING_PROFILER;
      break;
    case 'search':
      pathData = PATH_SEARCH;
      break;
    case 'settings':
      pathData = PATH_SETTINGS;
      break;
    case 'store-as-global-variable':
      pathData = PATH_STORE_AS_GLOBAL_VARIABLE;
      break;
    case 'strict-mode-non-compliant':
      pathData = PATH_STRICT_MODE_NON_COMPLIANT;
      break;
    case 'suspense':
      pathData = PATH_SUSPEND;
      viewBox = '-2 -2 28 28';
      break;
    case 'warning':
      pathData = PATH_WARNING;
      break;
    default:
      console.warn(`Unsupported type "${type}" specified for Icon`);
      break;
  }

  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      className={`${styles.Icon} ${className}`}
      width="24"
      height="24"
      viewBox={viewBox}>
      {title && <title>{title}</title>}
      <path d="M0 0h24v24H0z" fill="none" />
      <path fill="currentColor" d={pathData} />
    </svg>
  );
}