Merge pull request #86 from AElf-devops/feat/icons-nav

feat: icon size control by font-size

packages/internal-icons/src/components/Keyboard.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { AelfIcon } from '../icon/AelfIcon';
+import AelfSVGComponent from '../svgs/key-board.svg';
+import { type IconProps } from '../type';
+
+const componentName = 'Keyboard';
+export const Keyboard = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
+  return (
+    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
+  );
+});
+Keyboard.displayName = componentName;

packages/internal-icons/src/components/UploadIcon.tsx

@@ -7,14 +7,7 @@ import { type IconProps } from '../type';
 const componentName = 'UploadIcon';
 export const UploadIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
   return (
-    <AelfIcon
-      component={AelfSVGComponent}
-      componentName={componentName}
-      defaultWidth={41}
-      defaultHeight={40}
-      ref={ref}
-      {...props}
-    />
+    <AelfIcon component={AelfSVGComponent} componentName={componentName} ref={ref} {...props} />
   );
 });
 UploadIcon.displayName = componentName;

packages/internal-icons/src/components/direction/LeftOutlined.tsx

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.5462 16.0006L20.5966 26.051C20.7528 26.2072 20.7528 26.4604 20.5966 26.6166L19.1823 28.0309C19.0261 28.1871 18.7729 28.1871 18.6167 28.0309L7.29289 16.7071C6.90237 16.3166 6.90237 15.6834 7.29289 15.2929L18.618 3.96896C18.7742 3.81275 19.0275 3.81275 19.1837 3.96896L20.5979 5.38318C20.7541 5.53939 20.7541 5.79265 20.5979 5.94886L10.5462 16.0006Z"
+    fill="#101114"
+  />
+</svg>;

packages/internal-icons/src/hooks/useStyle.ts

@@ -21,8 +21,6 @@ const useStyles = createStyles<IconProps, { iconWrap: SerializedStyles }>(({ css
   return {
     iconWrap: css`
       display: inline-flex;
-      width: ${typeof props.width === 'number' ? `${props.width}px` : props.width};
-      height: ${typeof props.height === 'number' ? `${props.height}px` : props.height};
       path:nth-of-type(1) {
         fill: ${props.color};
       }
@@ -33,8 +31,8 @@ const useStyles = createStyles<IconProps, { iconWrap: SerializedStyles }>(({ css
         fill: ${props.activeColor};
       }
       svg {
-        width: 100%;
-        height: 100%;
+        width: 1em;
+        height: 1em;
       }
       ${createPathsStyle(props.twoToneColor ?? [])}
       ${createPathsStyle(props.hoverTwoToneColor ?? [], 'hover')}

packages/internal-icons/src/icon/AelfIcon.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ConfigProvider } from 'antd';
 import classnames from 'classnames';
 
 import { useStyles } from '../hooks';
@@ -8,42 +7,31 @@ import type { IconProps } from '../type';
 export interface AelfIconProps {
   componentName: string;
   component: React.FC<React.SVGProps<SVGSVGElement>>;
-  defaultWidth?: string | number;
-  defaultHeight?: string | number;
 }
 
 export const AelfIcon = React.forwardRef<HTMLSpanElement, IconProps & AelfIconProps>(
   (props, ref) => {
-    const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
-    const prefixCls = getPrefixCls('aelf-icon');
-
     const {
-      defaultWidth,
-      defaultHeight,
       component,
-      componentName,
       color,
       hoverColor,
       activeColor,
       twoToneColor,
       hoverTwoToneColor,
       activeTwoToneColor,
-
       ...restProps
     } = props;
-    const { width = defaultWidth, height = defaultHeight, style, ...restedProps } = restProps;
+    const { style, ...restedProps } = restProps;
     const iconColor: IconProps = {
-      width,
-      height,
       color,
       hoverColor,
       activeColor,
       twoToneColor,
       hoverTwoToneColor,
       activeTwoToneColor,
     };
-    const { styles } = useStyles(iconColor);
-    const cls = classnames(prefixCls, props.className, styles.iconWrap);
+    const { styles, prefixCls } = useStyles(iconColor);
+    const cls = classnames(`${prefixCls}-icon`, props.className, styles.iconWrap);
     const Com = component;
     return (
       <span

packages/internal-icons/src/type/index.ts

@@ -1,8 +1,6 @@
 import React from 'react';
 
 export interface IconInnerProps {
-  width?: string | number;
-  height?: string | number;
   color?: string;
   hoverColor?: string;
   activeColor?: string;