refactor: New Icon system with Enhanced Antd Custom Icon (#12229)

* Enhance custom icon

* Minor fix

* Move DashboardList icon trash icon to enhanced

* Enhance trash icon on lists

* Enhance actions icons card view

* Add storybook entry for custom icons

* Test delete button

* Remove commented line

* Fix linting issue

* Enhance Antd icons

* Enhance existing icons up to BoltSmallRunIcon

* Remove unused import

* Import/Exports all icons from index

* Export all existing icons

* Implement more enhanced icons

* Add data-id on edit buttons

* Fix lint issue

* Inherit color

* Apply original color to actions

* Fix linting issue

* Fix typo

* Change ModeHoriz to MoreHoriz

superset-frontend/src/CRUD/CollectionTable.tsx

@@ -20,6 +20,7 @@ import React, { ReactNode } from 'react';
 import shortid from 'shortid';
 import { t, styled } from '@superset-ui/core';
 import Button from 'src/components/Button';
+import Icons from 'src/components/Icons';
 import Fieldset from './Fieldset';
 import { recurseReactClone } from './utils';
 import './crud.less';
@@ -251,13 +252,18 @@ export default class CRUDCollection extends React.PureComponent<
     }
     if (allowDeletes) {
       tds.push(
-        <td key="__actions" data-test="crud-delete-option">
-          <i
-            {...{ 'data-test': 'crud-delete-icon' }}
-            role="button"
+        <td
+          key="__actions"
+          data-test="crud-delete-option"
+          className="text-primary"
+        >
+          <Icons.Trash
             aria-label="Delete item"
+            className="pointer"
+            data-test="crud-delete-icon"
+            iconSize="m"
+            role="button"
             tabIndex={0}
-            className="fa fa-trash text-primary pointer"
             onClick={this.deleteItem.bind(this, record.id)}
           />
         </td>,

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

@@ -0,0 +1,31 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import * as AntdIcons from '@ant-design/icons/lib/icons';
+import Icon from './Icon';
+import IconType from './IconType';
+
+const AntdEnhancedIcons = Object.keys(AntdIcons)
+  .map(k => ({
+    [k]: (props: IconType) => <Icon component={AntdIcons[k]} {...props} />,
+  }))
+  .reduce((l, r) => ({ ...l, ...r }));
+
+export default AntdEnhancedIcons;

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

@@ -0,0 +1,50 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import AntdIcon from '@ant-design/icons';
+import { styled } from '@superset-ui/core';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+import IconType from './IconType';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const EnhancedIcon = ({ iconColor, iconSize, ...rest }: IconType) => (
+  <AntdIcon viewBox={rest.viewBox || '0 0 24 24'} {...rest} />
+);
+
+const Icon = styled(EnhancedIcon)<IconType>`
+  ${({ iconColor }) => iconColor && `color: ${iconColor};`};
+  font-size: ${({ iconSize, theme }) =>
+    iconSize ? `${theme.typography.sizes[iconSize]}px` : '24px'};
+`;
+
+export const renderIcon = (
+  SVGComponent:
+    | React.ComponentClass<
+        CustomIconComponentProps | React.SVGProps<SVGSVGElement>,
+        any
+      >
+    | React.FunctionComponent<
+        CustomIconComponentProps | React.SVGProps<SVGSVGElement>
+      >
+    | undefined,
+  props: IconType,
+) => <Icon component={SVGComponent} {...props} />;
+
+export default Icon;

superset-frontend/src/components/Icons/IconType.ts

@@ -0,0 +1,28 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import AntdIcon from '@ant-design/icons';
+
+type AntdIconType = typeof AntdIcon.defaultProps;
+type IconType = AntdIconType & {
+  iconColor?: string;
+  iconSize?: 's' | 'm' | 'l' | 'xl' | 'xxl';
+};
+
+export default IconType;

superset-frontend/src/components/Icons/icons.stories.jsx

@@ -0,0 +1,83 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import { styled, supersetTheme } from '@superset-ui/core';
+import Icons from '.';
+import Icon from './Icon';
+
+export default {
+  title: 'Icons',
+  component: Icon,
+  decorators: [withKnobs],
+};
+
+const palette = {};
+Object.entries(supersetTheme.colors).forEach(([familyName, family]) => {
+  Object.entries(family).forEach(([colorName, colorValue]) => {
+    palette[`${familyName} / ${colorName}`] = colorValue;
+  });
+});
+
+const colorKnob = {
+  label: 'Color',
+  options: {
+    Default: null,
+    ...palette,
+  },
+  defaultValue: null,
+};
+
+const IconSet = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
+
+const IconBlock = styled.div`
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 10%;
+  text-align: center;
+  padding: ${({ theme }) => theme.gridUnit * 2}px;
+  div {
+    white-space: nowrap;
+    font-size: ${({ theme }) => theme.typography.sizes.s}px;
+  }
+`;
+
+export const SupersetIcon = () => (
+  <IconSet>
+    {Object.keys(Icons).map(k => {
+      const IconComponent = Icons[k];
+      return (
+        <IconBlock key={k}>
+          <IconComponent
+            iconColor={select(
+              colorKnob.label,
+              colorKnob.options,
+              colorKnob.defaultValue,
+              colorKnob.groupId,
+            )}
+          />
+        </IconBlock>
+      );
+    })}
+  </IconSet>
+);