chore(ui) Remove old icons (#20052)

* Remove the sentry warnings I added to track usage of deprecated icons.
* Remove unused icon files.
* Fix size of icon in settings > repositories as it was too small.
* Restore css classnames that youtrack plugin in getsentry is using

src/sentry/static/sentry/app/components/alert.tsx

@@ -3,16 +3,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import styled from '@emotion/styled';
-import {withScope, captureException, Severity} from '@sentry/react';
 
-import InlineSvg from 'app/components/inlineSvg';
 import space from 'app/styles/space';
 
 // exporting it down with alertStyles caused error  'Props' is not defined  no-undef
 export type Props = {
   type?: 'muted' | 'info' | 'warning' | 'success' | 'error' | 'beta';
-  iconSize?: string;
-  icon?: string | React.ReactNode;
+  icon?: React.ReactNode;
   system?: boolean;
 };
 
@@ -92,27 +89,14 @@ const Alert = styled(
   ({
     type,
     icon,
-    iconSize,
     children,
     className,
     system: _system, // don't forward to `div`
     ...props
   }: AlertProps) => {
-    if (typeof icon === 'string') {
-      withScope(scope => {
-        scope.setLevel(Severity.Warning);
-        scope.setTag('icon', icon);
-        scope.setTag('componentType', 'alert');
-        captureException(new Error('Deprecated SVG icon referenced'));
-      });
-    }
     return (
       <div className={classNames(type ? `ref-${type}` : '', className)} {...props}>
-        {icon && (
-          <IconWrapper>
-            {typeof icon === 'string' ? <InlineSvg src={icon} size={iconSize!} /> : icon}
-          </IconWrapper>
-        )}
+        {icon && <IconWrapper>{icon}</IconWrapper>}
         <StyledTextBlock>{children}</StyledTextBlock>
       </div>
     );
@@ -123,14 +107,12 @@ const Alert = styled(
 
 Alert.propTypes = {
   type: PropTypes.oneOf(['muted', 'info', 'warning', 'success', 'error', 'beta']),
-  iconSize: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   system: PropTypes.bool,
 };
 
 Alert.defaultProps = {
   type: DEFAULT_TYPE,
-  iconSize: '20px',
 };
 
 export {alertStyles};

src/sentry/static/sentry/app/components/alertLink.tsx

@@ -1,11 +1,9 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import omit from 'lodash/omit';
-import {withScope, captureException, Severity} from '@sentry/react';
 
 import Link from 'app/components/links/link';
 import ExternalLink from 'app/components/links/externalLink';
-import InlineSvg from 'app/components/inlineSvg';
 import {IconChevron} from 'app/icons';
 import space from 'app/styles/space';
 
@@ -54,15 +52,6 @@ class AlertLink extends React.Component<Props> {
       href,
     } = this.props;
 
-    if (typeof icon === 'string') {
-      withScope(scope => {
-        scope.setLevel(Severity.Warning);
-        scope.setTag('icon', icon);
-        scope.setTag('componentType', 'alertLink');
-        captureException(new Error('Deprecated SVG icon referenced'));
-      });
-    }
-
     return (
       <StyledLink
         to={to}
@@ -73,11 +62,7 @@ class AlertLink extends React.Component<Props> {
         withoutMarginBottom={withoutMarginBottom}
         openInNewTab={openInNewTab}
       >
-        {icon && (
-          <IconWrapper>
-            {typeof icon === 'string' ? <InlineSvg src={icon} /> : icon}
-          </IconWrapper>
-        )}
+        {icon && <IconWrapper>{icon}</IconWrapper>}
         <AlertLinkText>{children}</AlertLinkText>
         <IconLink>
           <IconChevron direction="right" />

src/sentry/static/sentry/app/components/button.tsx

@@ -4,11 +4,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
-import {withScope, captureException, Severity} from '@sentry/react';
 
 import {Theme} from 'app/utils/theme';
 import ExternalLink from 'app/components/links/externalLink';
-import InlineSvg from 'app/components/inlineSvg';
 import Tooltip from 'app/components/tooltip';
 
 /**
@@ -26,8 +24,7 @@ type Props = {
   busy?: boolean;
   to?: string | object;
   href?: string;
-  icon?: string | React.ReactNode;
-  iconSize?: string;
+  icon?: React.ReactNode;
   title?: string;
   external?: boolean;
   borderless?: boolean;
@@ -60,9 +57,9 @@ class Button extends React.Component<ButtonProps, {}> {
      */
     href: PropTypes.string,
     /**
-     * Path to an icon svg that will be displayed to left of button label
+     * A react node to use as the icons. Generally pulled from app/icons
      */
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    icon: PropTypes.node,
     /**
      * Tooltip text
      */
@@ -127,7 +124,6 @@ class Button extends React.Component<ButtonProps, {}> {
       href,
       title,
       icon,
-      iconSize,
       children,
       label,
       borderless,
@@ -145,15 +141,6 @@ class Button extends React.Component<ButtonProps, {}> {
     const screenReaderLabel =
       label || (typeof children === 'string' ? children : undefined);
 
-    if (typeof icon === 'string') {
-      withScope(scope => {
-        scope.setLevel(Severity.Warning);
-        scope.setTag('icon', icon);
-        scope.setTag('componentType', 'button');
-        captureException(new Error('Deprecated SVG icon referenced'));
-      });
-    }
-
     // Buttons come in 4 flavors: <Link>, <ExternalLink>, <a>, and <button>.
     // Let's use props to determine which to serve up, so we don't have to think about it.
     // *Note* you must still handle tabindex manually.
@@ -179,16 +166,7 @@ class Button extends React.Component<ButtonProps, {}> {
         >
           {icon && (
             <Icon size={size} hasChildren={!!children}>
-              {typeof icon === 'string' ? (
-                <StyledInlineSvg
-                  src={icon}
-                  size={
-                    iconSize ? iconSize : size && size.endsWith('small') ? '12px' : '14px'
-                  }
-                />
-              ) : (
-                icon
-              )}
+              {icon}
             </Icon>
           )}
           {children}
@@ -386,7 +364,3 @@ const Icon = styled('span')<IconProps>`
   margin-right: ${getIconMargin};
   height: ${getFontSize};
 `;
-
-const StyledInlineSvg = styled(InlineSvg)`
-  display: block;
-`;

src/sentry/static/sentry/app/icons/icon-arrow-left.svg

@@ -1 +0,0 @@
-<svg width="17" height="15" xmlns="http://www.w3.org/2000/svg"><path d="M4.573 8.652l4.151 4.247c.39.4.392 1.049.004 1.45a.976.976 0 0 1-1.408.005L.79 7.672 7.316.952a.976.976 0 0 1 1.41 0c.388.4.388 1.05 0 1.45l-4.129 4.25H15.98c.447 0 .81.448.81 1s-.363 1-.81 1H4.573z" fill="#493E54" fill-rule="nonzero"/></svg>

src/sentry/static/sentry/app/icons/icon-checkmark-sm.svg

@@ -1,11 +0,0 @@
-<svg viewBox="0 0 9 9">
-  <g
-    stroke="currentColor"
-    stroke-width="1"
-    fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <polyline points="0.5 5 2.5 7 8.5 2" />
-  </g>
-</svg>

src/sentry/static/sentry/app/icons/icon-chevron-down.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M20 9l-8 8-8-8" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>

src/sentry/static/sentry/app/icons/icon-chevron-left.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M15 20l-8-8 8-8" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>

src/sentry/static/sentry/app/icons/icon-chevron-right.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M9 4l8 8-8 8" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>

src/sentry/static/sentry/app/icons/icon-chevron-up.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M20 15l-8-8-8 8" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>

src/sentry/static/sentry/app/icons/icon-circle-check.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	<g id="icon-circle-check" fill="currentColor" fill-rule="nonzero">
-		<path d="M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M10.25,14.6691198 L16.5428932,8.37622655 C16.9334175,7.98570226 17.5665825,7.98570226 17.9571068,8.37622655 C18.3476311,8.76675084 18.3476311,9.39991582 17.9571068,9.79044011 L10.9571068,16.7904401 C10.5665825,17.1809644 9.93341751,17.1809644 9.54289322,16.7904401 L6.12624857,13.3737955 C5.73572428,12.9832712 5.73572428,12.3501062 6.12624857,11.9595819 C6.51677286,11.5690576 7.14993784,11.5690576 7.54046213,11.9595819 L10.25,14.6691198 Z">
-		</path>
-	</g>
-</svg>