feat(Icon) Icon with theme and colorful icon #11971

HeskeyBaozi · 2018-08-30T15:13:01Z

Features

New prop theme to <Icon />. It can specific the theme of icons.

import { Icon } from 'antd';

ReactDOM.render(
  <div className="icons-list">
    <Icon type="home" />
    <Icon type="setting" theme="filled" />
    <Icon type="smile" theme="outlined" />
    <Icon type="sync" spin />
    <Icon type="loading" />
  </div>,
  mountNode
);

<Icon type="setting" theme="filled" />
<Icon type="smile" theme="outlined" />
<Icon type="dollar" theme="twoTone" />
//        ⬇️
// is equivalent to
//        ⬇️
<Icon type="setting-fill" />
<Icon type="smile-o" />
<Icon type="dollar-twotone" />

Two-tone icons

import { Icon } from 'antd';

Icon.setTwoToneColors({
  primaryColor: '#1890ff',
});

ReactDOM.render(
  <div className="icons-list">
    <Icon type="dollar" theme="twoTone" />
    <Icon type="euro" theme="twoTone" />
    <Icon type="check-circle" theme="twoTone" primaryColor="#f5222d" />
  </div>,
  mountNode
);

Bug fixes

c1f63a1
The components notification, message, progress: status error use close(-circle) icon instead of cross(-circle) icon.

WIP

the whole icons
rc-steps support custon finish icon & error icon react-component/steps#47

ant-design-bot · 2018-08-30T15:20:17Z

Deploy preview for ant-design ready!

Built with commit 82746c0

https://deploy-preview-11971--ant-design.netlify.com

yesmeck · 2018-08-30T15:33:00Z

theme 用 filled、outlined、two-tone?

codecov · 2018-08-31T02:03:38Z

Codecov Report

Merging #11971 into feature-3.9.0 will increase coverage by 0.02%.
The diff coverage is 100%.

@@                Coverage Diff                @@
##           feature-3.9.0   #11971      +/-   ##
=================================================
+ Coverage          92.34%   92.36%   +0.02%     
=================================================
  Files                207      208       +1     
  Lines               5405     5446      +41     
  Branches            1517     1526       +9     
=================================================
+ Hits                4991     5030      +39     
- Misses               410      412       +2     
  Partials               4        4

Impacted Files	Coverage Δ
components/pagination/Pagination.tsx	`100% <ø> (ø)`	⬆️
components/tree-select/index.tsx	`83.78% <ø> (ø)`	⬆️
components/notification/index.tsx	`95.65% <ø> (ø)`	⬆️
components/date-picker/WeekPicker.tsx	`80.39% <ø> (ø)`	⬆️
components/switch/index.tsx	`100% <ø> (ø)`	⬆️
components/date-picker/RangePicker.tsx	`95.17% <ø> (ø)`	⬆️
components/collapse/Collapse.tsx	`100% <ø> (ø)`	⬆️
components/date-picker/createPicker.tsx	`97.01% <ø> (ø)`	⬆️
components/rate/index.tsx	`100% <ø> (ø)`	⬆️
components/steps/index.tsx	`100% <100%> (ø)`	⬆️
... and 8 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 175ae52...82746c0. Read the comment docs.

yesmeck · 2018-08-31T03:02:59Z

说错了，应该是 twoTone

afc163 · 2018-09-01T05:45:50Z

site/theme/template/IconDisplay/index.jsx

+        };
+    }
+    render() {
+        return null;


应该是两个空格的缩进。

不对，这是 ts 生成的文件，那不应该提交上来。

afc163 · 2018-09-01T05:45:58Z

site/theme/template/IconDisplay/index.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable */


这个很不好哦。

afc163 · 2018-09-01T05:46:08Z

site/theme/template/IconDisplay/index.jsx

+        return null;
+    }
+}
+IconDisplay.displayName = 'IconDisplay';


没必要写 displayName。

afc163 · 2018-09-01T08:28:40Z

site/theme/template/IconDisplay/CopyableIcon.tsx

@@ -20,7 +20,7 @@ const CopyableIcon: React.SFC<CopyableIconProps> = ({
      onCopy={() => onCopied(type)}
    >
      <li className={justCopied === type ? 'copied' : ''}>
-        <Icon type={type} theme={theme} />
+        <Icon type={type} theme={theme} primaryColor="#333" secondaryColor="#e6e6e6" />


secondaryColor 应该是直接用 primaryColor 算出来的吧？

primaryColor 应该是只给 twoTone 用的，不如就叫 twoToneColor，和 setTwoToneColors 保持一致。

setTwoToneColors 也改为 setTwoToneColor('xxx') 好了。

默认的主色是 #333, 副色是 #e6e6e6
用ant-design-palettes无法生成正确的副色

这样

const colors = { primary: '#333', secondary: '#E6E6E6', // optional }; <Icon type={type} theme={theme} twoToneColors={colors} />

如何

保留副色的接口是因为 ant-design-palettes 的 generate 函数生成的副色有时无法使用，如
generate('#333') 生成的十个颜色都太深了

#333 到 #e6e6e6 是怎么算出来的呢，不要用 ant-design-palettes，单独写一个转换。

不要让用户去设他们能力范围之外的属性。

默认主色应该是 antd 的主色。

TwoTone 的默认效果应该类似 https://ego-icons.com/

afc163 · 2018-09-01T09:06:35Z

svgClassName 和 svgStyle 貌似没啥必要，建议去掉。

afc163 · 2018-09-01T09:13:50Z

文档补充一段提示吧，3.9.0 之后新增了哪些 API，这样开发者如果用老版本不容易搞错。

HeskeyBaozi · 2018-09-01T11:53:39Z

svgClassName 可以去掉，替代方案是用户使用元素选择器 .anticon svg 设置样式
~~svgStyle 用来实现图标的旋转、翻转等效果。这个高优先级的内联样式我觉得接口保留会好一点。~~
了解需求

afc163 · 2018-09-02T09:26:33Z

components/icon/index.zh-CN.md

@@ -89,8 +89,9 @@ ReactDOM.render(
 | className | 计算后的 `svg` 类名 | string | - |
 | style | 计算后的 `svg` 元素样式 | CSSProperties | - |

+#### 使用 iconfont.cn 的自定义图标


用三个 ###

上面的 ### Icon 可以去掉，没啥用。

afc163 · 2018-09-02T10:07:22Z

冲突了又，解决了先合并吧。

afc163 · 2018-09-02T10:41:31Z

components/date-picker/RangePicker.tsx

@@ -320,6 +320,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
        type="close-circle"
        className={`${prefixCls}-picker-clear`}
        onClick={this.clearSelection}
+        theme={'filled'}


theme="filled"

into feature-3.9.0

HeskeyBaozi added 3 commits August 30, 2018 20:43

cross -> close

c1f63a1

theme props & two-tone icon

1c6d64e

update test snapshot

96d0816

afc163 reviewed Sep 1, 2018

View reviewed changes

site/theme/template/IconDisplay/index.tsx Outdated

@@ -0,0 +1,23 @@

/* eslint-disable */

Copy link

Member

afc163 Sep 1, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个很不好哦。

afc163 reviewed Sep 1, 2018

View reviewed changes

afc163 reviewed Sep 2, 2018

View reviewed changes

HeskeyBaozi force-pushed the feature/icon-with-theme-and-colorful-icon branch from 0027e98 to 4ea3aae Compare September 2, 2018 10:26

afc163 reviewed Sep 2, 2018

View reviewed changes

HeskeyBaozi added 12 commits September 2, 2018 18:54

Merge branch 'feature-3.9.0' of https://github.com/ant-design/ant-design

9d58c7d

into feature-3.9.0

filled, outlined and two-tone

cea1fac

new getter & setter

52c8592

update test snapshot

513ead1

remove Icons naming convention

b00bc7b

two-tone -> twoTone

411a147

update test case

6ce6e58

update test case

1235968

use svg icon in rc-steps

85762e2

update Steps test snapshot

6b309e0

default to icon

4456751

remove IconDisplay jsx

90fb126

HeskeyBaozi added 19 commits September 2, 2018 18:58

default primary color #1890ff

b18db23

simpify Icon api

79dd79e

fix collapse arrow style

e8e702b

update test case snapshot

0929c93

remove svgClassName

3e88151

update test snapshot

992f88d

remove prop 'svgStyle' and i think it's really good

f6da9ad

add new api tips in Icon docs

f7f37fd

remove IconSet

7330caf

90+ new icons

a8fb3ef

icon size: 24px -> 36px

21cbd69

add tip title before icon font method

a9516af

add logo alibaba

e66742e

optimize icon docs: nomalize title

abbac48

default to icon

2ee4b67

icons in message component use filled theme

96beb6e

use rc-calendar@~9.7.0

fa674b2

fix date-picker clear-icon size

9968ff3

fix icon theme code style

e784ac3

HeskeyBaozi force-pushed the feature/icon-with-theme-and-colorful-icon branch from f44b078 to e784ac3 Compare September 2, 2018 11:02

HeskeyBaozi added 7 commits September 2, 2018 19:11

optimize icon docs

177e0a8

upgdate test snapshot

bb71b0e

fix icon test case

d05a5cb

two-tone color setting docs

1126025

fix the default theme outlined

90eae4c

fix test case & update test snapshot

a9b64a5

fix icon test coverage

82746c0

HeskeyBaozi changed the title ~~WIP: feat(Icon) Icon with theme and colorful icon~~ feat(Icon) Icon with theme and colorful icon Sep 2, 2018

afc163 merged commit 52f1625 into feature-3.9.0 Sep 2, 2018

afc163 deleted the feature/icon-with-theme-and-colorful-icon branch September 2, 2018 12:59

feat(Icon) Icon with theme and colorful icon #11971

feat(Icon) Icon with theme and colorful icon #11971

HeskeyBaozi commented Aug 30, 2018 •

edited

ant-design-bot commented Aug 30, 2018 •

edited

yesmeck commented Aug 30, 2018 •

edited

codecov bot commented Aug 31, 2018 •

edited

yesmeck commented Aug 31, 2018

afc163 Sep 1, 2018

afc163 Sep 1, 2018

afc163 Sep 1, 2018

afc163 Sep 1, 2018

afc163 Sep 1, 2018

afc163 Sep 1, 2018 •

edited

HeskeyBaozi Sep 1, 2018

HeskeyBaozi Sep 1, 2018 •

edited

HeskeyBaozi Sep 1, 2018

afc163 Sep 1, 2018 •

edited

afc163 Sep 1, 2018

afc163 Sep 1, 2018

afc163 Sep 1, 2018

afc163 commented Sep 1, 2018

afc163 commented Sep 1, 2018

HeskeyBaozi commented Sep 1, 2018 •

edited

afc163 Sep 2, 2018

afc163 commented Sep 2, 2018

afc163 Sep 2, 2018

feat(Icon) Icon with theme and colorful icon #11971

feat(Icon) Icon with theme and colorful icon #11971

Conversation

HeskeyBaozi commented Aug 30, 2018 • edited

Features

Bug fixes

WIP

ant-design-bot commented Aug 30, 2018 • edited

yesmeck commented Aug 30, 2018 • edited

codecov bot commented Aug 31, 2018 • edited

Codecov Report

yesmeck commented Aug 31, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 Sep 1, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HeskeyBaozi Sep 1, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 Sep 1, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afc163 commented Sep 1, 2018

afc163 commented Sep 1, 2018

HeskeyBaozi commented Sep 1, 2018 • edited

Choose a reason for hiding this comment

afc163 commented Sep 2, 2018

Choose a reason for hiding this comment

HeskeyBaozi commented Aug 30, 2018 •

edited

ant-design-bot commented Aug 30, 2018 •

edited

yesmeck commented Aug 30, 2018 •

edited

codecov bot commented Aug 31, 2018 •

edited

afc163 Sep 1, 2018 •

edited

HeskeyBaozi Sep 1, 2018 •

edited

afc163 Sep 1, 2018 •

edited

HeskeyBaozi commented Sep 1, 2018 •

edited