How to use the @elastic/eui.ICON_TYPES.find function in @elastic/eui

To help you get started, we’ve selected a few @elastic/eui examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github elastic / kibana / x-pack / legacy / plugins / epm / public / components / package_card.tsx View on Github external
export function PackageCard({
  description,
  name,
  title,
  version,
  showInstalledBadge,
  status,
}: PackageCardProps) {
  const { toDetailView } = useLinks();
  const url = toDetailView({ name, version });

  // try to find a logo in EUI
  // TODO: first try to find icon in `icons` property
  const iconType = ICON_TYPES.find(key => key.toLowerCase() === `logo${name}`);
  const optionalIcon = iconType ?  : undefined;

  return (
    
  );
}
github elastic / kibana / x-pack / legacy / plugins / epm / public / screens / add_data_source / index.tsx View on Github external
export function AddDataSource({ pkgkey }: AddDataSourceProps) {
  const [info, setInfo] = useState(null);
  const { toDetailView } = useLinks();

  useEffect(() => {
    getPackageInfoByKey(pkgkey).then(response => {
      setInfo(response);
    });
  }, [pkgkey]);

  // don't have designs for loading/empty states
  if (!info) return null;

  const { version, name, title, datasets } = info;
  const iconType = ICON_TYPES.find(key => key.toLowerCase() === `logo${name}`);

  return (
    
      
        
      
      
        
          
            {iconType ?  : null}
github elastic / kibana / x-pack / legacy / plugins / epm / public / screens / detail / index.tsx View on Github external
export function DetailLayout(props: LayoutProps) {
  const { name, restrictWidth } = props;
  const { theme } = useCore();
  const iconType = ICON_TYPES.find(key => key.toLowerCase() === `logo${name}`);

  const FullWidthHeader = styled(EuiPage)`
    border-bottom: ${theme.eui.euiBorderThin}
    padding-bottom: ${theme.eui.paddingSizes.xl};
  `;

  const paddingSizeTop: number = parseInt(theme.eui.paddingSizes.xl, 10) * 1.25;
  const FullWidthContent = styled(EuiPage)`
    background-color: ${theme.eui.euiColorEmptyShade};
    padding-top: ${paddingSizeTop}px;
    flex-grow: 1;
  `;

  return (
github elastic / kibana / x-pack / legacy / plugins / lens / public / indexpattern_plugin / field_icon.tsx View on Github external
function getIconForDataType(dataType: string) {
  const icons: Partial>> = {
    boolean: 'invert',
    date: 'calendar',
  };
  return icons[dataType] || ICON_TYPES.find(t => t === dataType) || 'empty';
}
github elastic / kibana / x-pack / legacy / plugins / graph / public / components / field_manager / field_icon.tsx View on Github external
function getIconForDataType(dataType: string) {
  const icons: Partial>> = {
    boolean: 'invert',
    date: 'calendar',
    geo_point: 'globe',
    ip: 'storage',
  };
  return icons[dataType] || ICON_TYPES.find(t => t === dataType) || 'document';
}