feat(module:icon): switch to SVG icons #2171

wzhudev · 2018-09-20T07:33:24Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Icons based on font files.

Issue Number: N/A

What is the new behavior?

Icons based on SVG.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

But we should make a break change for this in the future.

Other information

cipchk · 2018-09-20T10:25:15Z

components/icon/demo/basic.ts

+@Component({
+  selector: 'nz-demo-icon-basic',
+  template: `
+    <i icon [type]="'home'"></i>


个人建议 icon 指令名有一定的意义，例如：

<i icon="home"></i>

我想会更好一点。

嗯, 现在 API 的设计只考虑了和 antd 兼容相似. 这个 API 的确更好一些.

wzhudev · 2018-09-21T04:29:48Z

CSS update in antd 3.8.2 is also included in this pull request for previewing the result.

~~Cannot provide an online preview because a new dependency hasn't been published to npm yet.~~

TODO:

Test
Doc needs to be updated
Some components broke because font icons were replaced with SVG icons
Feature Icon.createFromIconfontCN adaptive http or https ant-design/ant-design#12344

wzhudev · 2018-09-28T07:44:43Z

~~Waiting for @ant-design/icons-angular to release.~~

Released! 🎉

codecov · 2018-09-29T12:39:02Z

Codecov Report

Merging #2171 into master will decrease coverage by 0.03%.
The diff coverage is 94.73%.

@@            Coverage Diff             @@
##           master    #2171      +/-   ##
==========================================
- Coverage   95.96%   95.92%   -0.04%     
==========================================
  Files         482      485       +3     
  Lines       11956    12122     +166     
  Branches     1594     1621      +27     
==========================================
+ Hits        11473    11628     +155     
- Misses        134      139       +5     
- Partials      349      355       +6

Impacted Files	Coverage Δ
components/menu/demo/theme.ts	`100% <ø> (ø)`	⬆️
components/button/demo/icon.ts	`100% <ø> (ø)`	⬆️
components/layout/demo/custom-trigger.ts	`100% <ø> (ø)`	⬆️
components/layout/demo/side.ts	`100% <ø> (ø)`	⬆️
components/menu/demo/sider-current.ts	`100% <ø> (ø)`	⬆️
components/modal/nz-modal.service.ts	`91.17% <ø> (ø)`	⬆️
components/layout/demo/responsive.ts	`100% <ø> (ø)`	⬆️
components/button/demo/size.ts	`100% <ø> (ø)`	⬆️
components/menu/demo/inline.ts	`100% <ø> (ø)`	⬆️
components/button/demo/loading.ts	`100% <ø> (ø)`	⬆️
... and 49 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 e11247c...092609f. Read the comment docs.

wzhudev · 2018-09-30T02:49:41Z

Netlify is still not OK. Because of Node.js version perhaps. I cannot modify it in package.json. 😢 But the demo runs smoothly in local environment, both dev and prod, with Node.js 10.9.0 and @anguar/cli 6.2.1 which requires Node.js above 9.0.0.

~~If @ant-design/icons/lib/manifest provided an ES module, we wouldn't have to go through these.~~

~~However, since we publish the official website from local env, it seems ok.~~

I solved this problem by upgrading Node.js in Netlify to 10.9.0. The reason is what I mentioned above.

vthinkxie · 2018-09-30T07:54:28Z

components/icon/doc/index.zh-CN.md

+
+### 自定义 font 图标
+
+在 `1.7.0` 里，我们提供了一个 `fetchFromIconfont` 方法，方便开发者调用在 iconfont.cn 上自行管理的图标。


从 1.7.0 版本开始

vthinkxie · 2018-09-30T07:54:41Z

components/icon/doc/index.zh-CN.md


-> `?` 为可选。
+在 `1.7.0` 版本后，我们与 Ant Design `3.9.x` 同步，使用了 svg 图标替换了原先的 font 图标，从而带来了以下优势：


从 1.7.0 版本开始

components/icon/doc/index.zh-CN.md

vthinkxie · 2018-09-30T07:58:25Z

components/icon/doc/index.zh-CN.md


- 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`（实心） 和 `question-circle-o`（描线）；
- 命名顺序：`[图标名]-[形状?]-[描线?]-[方向?]`。
+### Svg 图标


wzhudev changed the title ~~[WIP] feat()~~ [WIP] feat(module:icon): switch to SVG icons Sep 20, 2018

cipchk reviewed Sep 20, 2018

View reviewed changes

wzhudev force-pushed the refactor-icon branch from f2b65f2 to 31bc03c Compare September 21, 2018 04:27

wzhudev force-pushed the refactor-icon branch from 31bc03c to 24a9449 Compare September 26, 2018 06:38

wzhudev added the PR: Need Review label Sep 28, 2018

wzhudev requested review from vthinkxie and hsuanxyz September 28, 2018 08:18

wzhudev changed the title ~~[WIP] feat(module:icon): switch to SVG icons~~ feat(module:icon): switch to SVG icons Sep 28, 2018

wzhudev force-pushed the refactor-icon branch 4 times, most recently from 17caef5 to c257bbe Compare September 29, 2018 12:38

wzhudev mentioned this pull request Sep 29, 2018

NG-ZORRO Roadmap #2025

Closed

3 tasks

wzhudev force-pushed the refactor-icon branch 4 times, most recently from d295a7b to 7e0a86c Compare September 30, 2018 01:31

wzhudev force-pushed the refactor-icon branch 2 times, most recently from d8032a6 to ee6b83a Compare September 30, 2018 02:37

wzhudev force-pushed the refactor-icon branch 2 times, most recently from 5190e96 to 145e2b3 Compare September 30, 2018 04:49

feat(module:icon): support svg icon

f4f98cb

wzhudev force-pushed the refactor-icon branch from cf3c85c to f4f98cb Compare September 30, 2018 07:52

vthinkxie reviewed Sep 30, 2018

View reviewed changes

hsuanxyz mentioned this pull request Oct 3, 2018

feat(schematics): add fix icon schematic #2238

Merged

3 tasks

vthinkxie approved these changes Oct 7, 2018

View reviewed changes

fix doc and icon size

9c50132

wzhudev force-pushed the refactor-icon branch from 87a4672 to 9c50132 Compare October 8, 2018 01:34

wzhudev removed the PR: Need Review 👀 label Oct 8, 2018

fix typo

092609f

vthinkxie merged commit 7bdb79b into NG-ZORRO:master Oct 8, 2018

wzhudev deleted the refactor-icon branch October 8, 2018 08:34

hsuanxyz pushed a commit to hsuanxyz/ng-zorro-antd that referenced this pull request Aug 5, 2020

feat(module:icon): switch to SVG icons (NG-ZORRO#2171)

0ab84b3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(module:icon): switch to SVG icons #2171

feat(module:icon): switch to SVG icons #2171

wzhudev commented Sep 20, 2018 •

edited

Loading

cipchk Sep 20, 2018

wzhudev Sep 20, 2018 •

edited

Loading

wzhudev commented Sep 21, 2018 •

edited

Loading

wzhudev commented Sep 28, 2018 •

edited

Loading

codecov bot commented Sep 29, 2018 •

edited

Loading

wzhudev commented Sep 30, 2018 •

edited

Loading

vthinkxie Sep 30, 2018

vthinkxie Sep 30, 2018

vthinkxie Sep 30, 2018


		### 自定义 font 图标

		在 `1.7.0` 里，我们提供了一个 `fetchFromIconfont` 方法，方便开发者调用在 iconfont.cn 上自行管理的图标。


		> `?` 为可选。
		在 `1.7.0` 版本后，我们与 Ant Design `3.9.x` 同步，使用了 svg 图标替换了原先的 font 图标，从而带来了以下优势：

feat(module:icon): switch to SVG icons #2171

feat(module:icon): switch to SVG icons #2171

Conversation

wzhudev commented Sep 20, 2018 • edited Loading

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

cipchk Sep 20, 2018

Choose a reason for hiding this comment

wzhudev Sep 20, 2018 • edited Loading

Choose a reason for hiding this comment

wzhudev commented Sep 21, 2018 • edited Loading

wzhudev commented Sep 28, 2018 • edited Loading

codecov bot commented Sep 29, 2018 • edited Loading

Codecov Report

wzhudev commented Sep 30, 2018 • edited Loading

vthinkxie Sep 30, 2018

Choose a reason for hiding this comment

vthinkxie Sep 30, 2018

Choose a reason for hiding this comment

vthinkxie Sep 30, 2018

Choose a reason for hiding this comment

wzhudev commented Sep 20, 2018 •

edited

Loading

wzhudev Sep 20, 2018 •

edited

Loading

wzhudev commented Sep 21, 2018 •

edited

Loading

wzhudev commented Sep 28, 2018 •

edited

Loading

codecov bot commented Sep 29, 2018 •

edited

Loading

wzhudev commented Sep 30, 2018 •

edited

Loading