refactor(icons): Replaces custom icons (tags, filter) with antd5 icons

superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 import {
-  styled,
   t,
   useTheme,
   getClientErrorObject,

superset-frontend/src/components/Icons/AntdEnhanced.tsx

@@ -78,6 +78,9 @@ import {
   UserOutlined,
   VerticalLeftOutlined,
   VerticalRightOutlined,
+  NumberOutlined,
+  ThunderboltOutlined,
+  FilterOutlined,
 } from '@ant-design/icons';
 import { StyledIcon } from './Icon';
 import IconType from './IconType';
@@ -142,6 +145,9 @@ const AntdIcons = {
   UserOutlined,
   VerticalLeftOutlined,
   VerticalRightOutlined,
+  NumberOutlined,
+  ThunderboltOutlined,
+  FilterOutlined,
 };
 
 const AntdEnhancedIcons = Object.keys(AntdIcons)

superset-frontend/src/components/Icons/index.tsx

@@ -31,7 +31,6 @@ const IconFileNames = [
   'bar-chart-tile',
   'big-number-chart-tile',
   'binoculars',
-  'bolt',
   'bolt_small',
   'bolt_small_run',
   'calendar',
@@ -153,12 +152,13 @@ const IconFileNames = [
   'warning_solid',
   'x-large',
   'x-small',
-  'tags',
   'ballot',
   'category',
   'undo',
   'redo',
   // to remove
+  'tags',
+  'bolt',
 ];
 
 const iconOverrides: Record<string, FC<IconType>> = {};

superset-frontend/src/dashboard/components/FiltersBadge/index.tsx

@@ -309,7 +309,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
         tabIndex={0}
         onKeyDown={handleKeyDown}
       >
-        <Icons.Filter iconSize="m" />
+        <Icons.FilterOutlined iconSize="m" />
         <StyledBadge
           data-test="applied-filter-count"
           className="applied-count"

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx

@@ -239,7 +239,7 @@ const FilterControls: FC<FilterControlsProps> = ({
         <DropdownContainer
           items={items}
           dropdownTriggerIcon={
-            <Icons.FilterSmall
+            <Icons.FilterOutlined
               css={css`
                 && {
                   margin-right: -4px;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx

@@ -30,7 +30,7 @@ import {
   FC,
 } from 'react';
 import cx from 'classnames';
-import { styled, t } from '@superset-ui/core';
+import { styled, t, useTheme } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import Loading from 'src/components/Loading';
 import { EmptyState } from 'src/components/EmptyState';
@@ -104,10 +104,6 @@ const StyledCollapseIcon = styled(Icons.Collapse)`
   `}
 `;
 
-const StyledFilterIcon = styled(Icons.Filter)`
-  color: ${({ theme }) => theme.colors.grayscale.base};
-`;
-
 const FilterBarEmptyStateContainer = styled.div`
   margin-top: ${({ theme }) => theme.gridUnit * 8}px;
 `;
@@ -132,6 +128,7 @@ const VerticalFilterBar: FC<VerticalBarProps> = ({
   toggleFiltersBar,
   width,
 }) => {
+  const theme = useTheme();
   const [isScrolling, setIsScrolling] = useState(false);
   const timeout = useRef<any>();
 
@@ -209,7 +206,8 @@ const VerticalFilterBar: FC<VerticalBarProps> = ({
             {...getFilterBarTestId('expand-button')}
             iconSize="l"
           />
-          <StyledFilterIcon
+          <Icons.FilterOutlined
+            iconColor={theme.colors.grayscale.base}
             {...getFilterBarTestId('filter-icon')}
             iconSize="l"
           />

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx

@@ -47,7 +47,8 @@ export const NameRow = ({
       `}
     >
       <InternalRow>
-        <Icons.FilterSmall
+        <Icons.FilterOutlined
+          iconSize="s"
           css={(theme: SupersetTheme) => css`
             margin-right: ${theme.gridUnit}px;
           `}

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx

@@ -109,7 +109,7 @@ const FilterTitlePane: FC<Props> = ({
         <Button
           buttonSize="default"
           buttonStyle="secondary"
-          icon={<Icons.Filter iconSize="m" />}
+          icon={<Icons.FilterOutlined iconSize="m" />}
           data-test="add-new-filter-button"
           onClick={() => handleOnAdd(NativeFilterType.NativeFilter)}
         >

superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx

@@ -141,7 +141,7 @@ export const datasourceIconLookup = {
   [DatasourceType.Query]: (
     <Icons.ConsoleSqlOutlined className="datasource-svg" />
   ),
-  [DatasourceType.Table]: <Icons.TableOutlined  className="datasource-svg" />,
+  [DatasourceType.Table]: <Icons.TableOutlined className="datasource-svg" />,
 };
 
 // Render title for datasource with tooltip only if text is longer than VISIBLE_TITLE_LENGTH

superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx

@@ -122,13 +122,13 @@ export const VizTile = ({
           `}
         `}
       >
-        <span 
-        css={
-          css`
-           padding:0px ${theme.gridUnit}px;
-          `
-        }
-        >{vizMeta.icon}</span>
+        <span
+          css={css`
+            padding: 0px ${theme.gridUnit}px;
+          `}
+        >
+          {vizMeta.icon}
+        </span>
         <span
           css={css`
             overflow: hidden;

superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx

@@ -618,7 +618,7 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
       },
       [Sections.Tags]: {
         title: t('Tags'),
-        icon: <Icons.Tags iconSize="m" />,
+        icon: <Icons.NumberOutlined iconSize="m" />,
         selectors: tags,
       },
     }),

superset-frontend/src/explore/components/controls/VizTypeControl/constants.tsx

@@ -30,7 +30,7 @@ export const FEATURED_CHARTS: VizMeta[] = [
     icon: <Icons.BarChartTile />,
   },
   { name: VizType.Area, icon: <Icons.AreaChartTile /> },
-  { name: VizType.Table, icon: <Icons.TableOutlined iconSize='l' /> },
+  { name: VizType.Table, icon: <Icons.TableOutlined iconSize="l" /> },
   {
     name: VizType.BigNumberTotal,
     icon: <Icons.BigNumberChartTile />,

superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx

@@ -334,7 +334,7 @@ const DatasetPanel = ({
             title={tableName || ''}
           >
             {tableName && (
-              <Icons.DatasetPanel iconColor={theme.colors.grayscale.base} />
+              <Icons.TableOutlined iconColor={theme.colors.grayscale.base} />
             )}
             {tableName}
           </StyledHeader>