fix: Icon dark theme

components/input-number/demo/size.md

@@ -21,7 +21,7 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <div>
+  <div className="site-input-number-wrapper">
     <InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
     <InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
     <InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />

site/theme/static/icons.less

@@ -46,7 +46,7 @@ ul.anticons-list {
       }
     }
 
-    &.outlined:hover {
+    &.twotone:hover {
       background-color: #8ecafe;
     }
 
@@ -81,3 +81,12 @@ ul.anticons-list {
   background: #f5f5f5;
   border-radius: 2px;
 }
+
+[data-theme='dark'] ul.anticons-list {
+  li {
+    color: #acacac;
+    &.twotone:hover {
+      background-color: #15395b;
+    }
+  }
+}

site/theme/template/IconDisplay/Category.tsx

@@ -2,11 +2,13 @@ import * as React from 'react';
 import { message } from 'antd';
 import { injectIntl } from 'react-intl';
 import CopyableIcon from './CopyableIcon';
+import { ThemeType } from './index';
 import { CategoriesKeys } from './fields';
 
 interface CategoryProps {
   title: CategoriesKeys;
   icons: string[];
+  theme: ThemeType;
   newIcons: string[];
   intl: any;
 }
@@ -44,6 +46,7 @@ class Category extends React.Component<CategoryProps, CategoryState> {
       icons,
       title,
       newIcons,
+      theme,
       intl: { messages },
     } = this.props;
     const items = icons.map(name => {
@@ -51,6 +54,7 @@ class Category extends React.Component<CategoryProps, CategoryState> {
         <CopyableIcon
           key={name}
           name={name}
+          theme={theme}
           isNew={newIcons.indexOf(name) >= 0}
           justCopied={this.state.justCopied}
           onCopied={this.onCopied}

site/theme/template/IconDisplay/CopyableIcon.tsx

@@ -3,6 +3,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { Badge } from 'antd';
 import classNames from 'classnames';
 import * as AntdIcons from '@ant-design/icons';
+import { ThemeType } from './index';
 
 const allIcons: {
   [key: string]: any;
@@ -11,13 +12,21 @@ const allIcons: {
 export interface CopyableIconProps {
   name: string;
   isNew: boolean;
+  theme: ThemeType;
   justCopied: string | null;
   onCopied: (type: string, text: string) => any;
 }
 
-const CopyableIcon: React.SFC<CopyableIconProps> = ({ name, isNew, justCopied, onCopied }) => {
+const CopyableIcon: React.SFC<CopyableIconProps> = ({
+  name,
+  isNew,
+  justCopied,
+  onCopied,
+  theme,
+}) => {
   const className = classNames({
     copied: justCopied === name,
+    [theme]: !!theme,
   });
   return (
     <CopyToClipboard text={`<${name} />`} onCopy={(text: string) => onCopied(name, text)}>

site/theme/template/IconDisplay/index.tsx

@@ -9,7 +9,7 @@ import IconPicSearcher from './IconPicSearcher';
 import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
 import { categories, Categories, CategoriesKeys } from './fields';
 
-type ThemeType = 'filled' | 'outlined' | 'twoTone';
+export type ThemeType = 'filled' | 'outlined' | 'twoTone';
 
 const allIcons: {
   [key: string]: any;
@@ -84,6 +84,7 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
         <Category
           key={category}
           title={category}
+          theme={theme}
           icons={icons}
           newIcons={IconDisplay.newIconNames}
         />