Standardize how the webviews access icons

webview/src/experiments/components/table/Cell.tsx

@@ -5,9 +5,8 @@ import { ErrorTooltip } from './Errors'
 import { Indicator, IndicatorWithJustTheCounter } from './Indicators'
 import styles from './styles.module.scss'
 import { CellProp, RowProp } from './interfaces'
-import ClockIcon from '../../../shared/components/icons/Clock'
 import { clickAndEnterProps } from '../../../util/props'
-import { StarFull, StarEmpty } from '../../../shared/components/icons'
+import { Clock, StarFull, StarEmpty } from '../../../shared/components/icons'
 import { pluralize } from '../../../util/strings'
 import { cellHasChanges } from '../../util/buildDynamicColumns'
 
@@ -170,7 +169,7 @@ export const FirstCell: React.FC<
               plotSelections
             )} selected for plots.`}
           />
-          {queued && <ClockIcon />}
+          {queued && <Clock />}
         </span>
         {isPlaceholder ? null : (
           <ErrorTooltip error={error}>

webview/src/experiments/components/table/Errors.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styles from './styles.module.scss'
-import ErrorIcon from '../../../shared/components/icons/Error'
+import { Error } from '../../../shared/components/icons'
 import Tooltip from '../../../shared/components/tooltip/Tooltip'
 
 export const ErrorTooltip: React.FC<{
@@ -10,7 +10,7 @@ export const ErrorTooltip: React.FC<{
   <Tooltip
     content={
       <div className={styles.errorTooltip}>
-        <ErrorIcon className={styles.errorIcon} />
+        <Error className={styles.errorIcon} />
         {error}
       </div>
     }

webview/src/experiments/components/table/Indicators.tsx

@@ -6,9 +6,11 @@ import { FilteredCounts } from 'dvc/src/experiments/model/filterBy/collect'
 import { TippyProps } from '@tippyjs/react'
 import styles from './styles.module.scss'
 import { Icon } from '../../../shared/components/Icon'
-import SvgSortPrecedence from '../../../shared/components/icons/SortPrecedence'
-import SvgFilter from '../../../shared/components/icons/Filter'
-import SvgGraphScatter from '../../../shared/components/icons/GraphScatter'
+import {
+  Filter,
+  GraphScatter,
+  SortPrecedence
+} from '../../../shared/components/icons'
 import { sendMessage } from '../../../shared/vscode'
 import Tooltip from '../../../shared/components/tooltip/Tooltip'
 import tooltipStyles from '../../../shared/components/tooltip/styles.module.scss'
@@ -147,15 +149,15 @@ export const Indicators = ({
           'Selected for Plotting (Max 7)'
         )}
       >
-        <Icon width={16} height={16} icon={SvgGraphScatter} />
+        <Icon width={16} height={16} icon={GraphScatter} />
       </Indicator>
       <Indicator
         count={sorts?.length}
         aria-label="sorts"
         onClick={focusSortsTree}
         tooltipContent={formatCountMessage('Sort', sortsCount)}
       >
-        <Icon width={16} height={16} icon={SvgSortPrecedence} />
+        <Icon width={16} height={16} icon={SortPrecedence} />
       </Indicator>
       <Indicator
         count={filters?.length}
@@ -170,7 +172,7 @@ export const Indicators = ({
           </>
         }
       >
-        <Icon width={16} height={16} icon={SvgFilter} />
+        <Icon width={16} height={16} icon={Filter} />
       </Indicator>
     </div>
   )

webview/src/shared/components/copyButton/CopyButton.tsx

@@ -1,8 +1,7 @@
 import React, { FC, useEffect, useRef, useState } from 'react'
 import cx from 'classnames'
 import styles from './styles.module.scss'
-import CopyIcon from '../icons/Copy'
-import CheckIcon from '../icons/Check'
+import { Copy, Check } from '../icons'
 
 const enum CopyButtonState {
   DEFAULT,
@@ -13,8 +12,8 @@ const enum CopyButtonState {
 const FailureIcon = () => <span>&#10005;</span>
 
 const copyIconComponents: Record<CopyButtonState, FC> = {
-  [CopyButtonState.DEFAULT]: CopyIcon,
-  [CopyButtonState.SUCCESS]: CheckIcon,
+  [CopyButtonState.DEFAULT]: Copy,
+  [CopyButtonState.SUCCESS]: Check,
   [CopyButtonState.FAILURE]: FailureIcon
 }
 

webview/src/shared/components/icons/index.ts

@@ -7,13 +7,17 @@ export { default as Close } from './Close'
 export { default as Copy } from './Copy'
 export { default as Dots } from './Dots'
 export { default as DownArrow } from './DownArrow'
+export { default as Error } from './Error'
 export { default as Ellipsis } from './Ellipsis'
+export { default as Filter } from './Filter'
+export { default as GraphScatter } from './GraphScatter'
 export { default as GraphLine } from './GraphLine'
 export { default as Gripper } from './Gripper'
 export { default as Info } from './Info'
 export { default as Lines } from './Lines'
 export { default as Pin } from './Pin'
 export { default as Refresh } from './Refresh'
 export { default as UpArrow } from './UpArrow'
+export { default as SortPrecedence } from './SortPrecedence'
 export { default as StarFull } from './StarFull'
 export { default as StarEmpty } from './StarEmpty'