Use React SVG components for icons instead of an icon font

[tibdex]

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:

• Delivering Octicons with SVG
• Inline SVG vs Icon Fonts
• Seriously, Don’t Use 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]

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

Thanks ;)

[yesmeck]

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

[yesmeck]

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]

@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]

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]

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]

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]

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

[tibdex]

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

Thanks for working on this @HeskeyBaozi 😉!

[krokofant]

Is this coming to the Angular implementation as well?