New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use React SVG components for icons instead of an icon font #10353

Closed
tibdex opened this Issue May 3, 2018 · 22 comments

Comments

Projects
None yet
@tibdex
Contributor

tibdex commented May 3, 2018

This issue is a continuation of the discussion on #7809.

What problem does this feature solve?

The goal is, in one of the future Ant Design minor/bugfix releases, to stop using an icon font by implementing icons as React SVG components instead.

There are multiple articles explaining how SVGs are better than icon fonts:

What does the proposed API look like?

There are two main features to preserve to be able to make the switch without introducing breaking changes:

  • It should be possible to use <Icon />'s style prop to change the icons size and color. In particular, the CSS properties font-size, line-height and color should work as expected. Align SVG Icons to Text and Say Goodbye to Font Icons explains how it's possible to maintain this behaviour with SVG icons.
  • Passing the correct type prop to the <Icon /> component should be enough to render the correct icon. To keep this working, we would write one React component per existing icon, import them all in <Icon />'s module, and have a switch in <Icon />'s render method to display the right icon based on the type prop. It would slightly increase the JS bundle size but I think it's worth it as:
    • It would remove today's fine print of Ant Design icons only working when connected to the Internet without a firewall blocking requests to the chinese http://iconfont.cn/ CDN.
    • The Ant Design team would be able to stop maintaining the local-iconfont package and the related documentation.

In the long term, to make sure only used icons end up in the final application bundle, we could stop using the <Icon type="link" /> component and expose all the icons as separate modules like Material UI does. We could also export all these separate icon modules from a single antd/icons.js and then leverage the existing babel-plugin-import technique to offer the import {Link} from 'antd/icons'; syntax sugar without weighing the final application size down.

What do you think? Can we make the switch without waiting for Ant Design 4?

@tibdex

This comment has been minimized.

Contributor

tibdex commented May 7, 2018

@yesmeck you asked me to open this issue in #7809 (comment), is there something I can do to make it move forward?

Thanks ;)

@yesmeck

This comment has been minimized.

Member

yesmeck commented May 7, 2018

@tibdex I will open a discussion at our internal weekly meeting

@yesmeck

This comment has been minimized.

Member

yesmeck commented May 10, 2018

Here is the summary of our meeting:

  1. We will migrate icon font to SVG (in next one or two minor version).
  2. Our designers are re-making icons of Ant Design (almost finished).

We will start the work when our designers finish the re-making.

@EthanRBrown

This comment has been minimized.

EthanRBrown commented May 13, 2018

@tibdex thank you so much for getting this started. Offline access is critical for our application (we have an Electron desktop version that needs to operate for extended periods of time without Internet access). Thanks, @yesmeck for seeing the importance of this enhancement! I look forward to it being integrated.

@marcacyr

This comment has been minimized.

marcacyr commented Jun 5, 2018

Thank you so much for the awesome library Ant Design team! We really appreciate all the amazing work you are doing.

Hoping this is something that can happen soon. Is there an update on whether this is going to happen, and if so when it will happen?

@tibdex

This comment has been minimized.

Contributor

tibdex commented Jul 17, 2018

Congrats on the 3.7.0 release, it's great!

@HeskeyBaozi and @yesmeck do you have any update to share on this ticket? Can we help you move forward?

@HeskeyBaozi

This comment has been minimized.

Member

HeskeyBaozi commented Jul 18, 2018

We're upgrading the <Icon/> component and use the antd-icons library, but there are some backward compatibility problems should be solved.
This feature will be added in version 3.8.x or 3.9.x if everything works fine.🌟

@IssuehuntBot

This comment has been minimized.

IssuehuntBot commented Jul 23, 2018

@kazup01 funded this issue with $10. Visit this issue on Issuehunt

@tibdex

This comment has been minimized.

Contributor

tibdex commented Aug 1, 2018

The corresponding PR is #11322 for those who want to follow the progress.

Thanks for working on this @HeskeyBaozi 😉!

@krokofant

This comment has been minimized.

krokofant commented Aug 1, 2018

Is this coming to the Angular implementation as well?

@marcacyr

This comment has been minimized.

marcacyr commented Aug 21, 2018

For those folks looking to override the icons with local copies to prevent the callout to the alicdn, I found this after much digging and got it working: https://www.npmjs.com/package/antd-local-icon

@HeskeyBaozi

This comment has been minimized.

Member

HeskeyBaozi commented Aug 24, 2018

@afc163

This comment has been minimized.

Member

afc163 commented Sep 2, 2018

Published with 3.9.0!

@afc163 afc163 closed this Sep 2, 2018

@zlab

This comment has been minimized.

zlab commented Sep 3, 2018

@afc163 使用svg后,打包的js大小翻倍了,之前使用fonticon,打包出来600K+,现在1200+了

@afc163

This comment has been minimized.

Member

afc163 commented Sep 3, 2018

@zlab 可以单独提一个 issue。

@IssuehuntBot

This comment has been minimized.

IssuehuntBot commented Sep 17, 2018

@IssuehuntBot

This comment has been minimized.

IssuehuntBot commented Sep 17, 2018

@afc163 has started working. Visit this issue on Issuehunt

@IssuehuntBot

This comment has been minimized.

IssuehuntBot commented Sep 17, 2018

@IssuehuntBot

This comment has been minimized.

IssuehuntBot commented Sep 17, 2018

@shine135235

This comment has been minimized.

shine135235 commented Nov 8, 2018

如果我在Icon上使用了 id属性 在设置点击事件后 无法通过e.target.id来获取?请问这个问题如何解决?

@1993klk

This comment has been minimized.

1993klk commented Dec 18, 2018

svg图标在IE edge下可被聚焦。导致Select组件单选模式在通过tab导航时必须按两次才能切换。采用svg显示的组件应该都存在这种情况。是否应该对svg使用focusable=false去规避呢?

@afc163

This comment has been minimized.

Member

afc163 commented Dec 18, 2018

@1993klk 来个 PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment