Use React SVG components for icons instead of an icon font

This issue is a continuation of the discussion on https://github.com/ant-design/ant-design/issues/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?

[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.

[afc163]

Published with 3.9.0!