Skip to content

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

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.

Sign up for GitHub

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

Jump to bottom
Closed
tibdex opened this issue May 3, 2018 · 38 comments
Closed

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

tibdex opened this issue May 3, 2018 · 38 comments

Comments

@tibdex
Copy link
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
Copy link
Contributor Author

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
Copy link
Member

yesmeck commented May 7, 2018

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

@yesmeck
Copy link
Member

yesmeck commented May 10, 2018 •
edited
Loading

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
Copy link

@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
Copy link

marcacyr commented Jun 5, 2018 •
edited
Loading

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?

@chenshuai2144 chenshuai2144 mentioned this issue Jun 6, 2018
Closed
@afc163 afc163 mentioned this issue Jun 27, 2018
Closed
1 task
@yesmeck yesmeck assigned HeskeyBaozi and unassigned zinkey Jun 29, 2018
@tibdex
Copy link
Contributor Author

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
Copy link
Contributor

HeskeyBaozi commented Jul 18, 2018 •
edited
Loading

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
Copy link

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

@tibdex
Copy link
Contributor Author

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
Copy link
Contributor

Is this coming to the Angular implementation as well?

@marcacyr
Copy link

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
Copy link
Contributor

HeskeyBaozi commented Aug 24, 2018 •
edited
Loading

New Icon Docs Preview
#11322

@HeskeyBaozi HeskeyBaozi mentioned this issue Aug 27, 2018
Merged
@afc163
Copy link
Member

afc163 commented Sep 2, 2018

Published with 3.9.0!

@afc163 afc163 closed this as completed Sep 2, 2018
@zlab
Copy link

zlab commented Sep 3, 2018 •
edited
Loading

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

@afc163
Copy link
Member

afc163 commented Sep 3, 2018

@zlab 可以单独提一个 issue。

@HeskeyBaozi HeskeyBaozi mentioned this issue Sep 14, 2018
Closed
1 task
@IssueHuntBot
Copy link

@loadbalance-sudachi-kun funded this issue with $256. Visit this issue on Issuehunt

@IssueHuntBot
Copy link

@afc163 has started working. Visit this issue on Issuehunt

@IssueHuntBot
Copy link

@afc163 has submitted output. Visit this issue on Issuehunt

@IssueHuntBot
Copy link

@afc163 has rewarded. Visit this issue on Issuehunt

@wzhudev wzhudev mentioned this issue Oct 19, 2018
Closed
@shine135235
Copy link

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

@1993klk
Copy link

1993klk commented Dec 18, 2018 •
edited
Loading

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

@afc163
Copy link
Member

afc163 commented Dec 18, 2018

@1993klk 来个 PR

@liangqifei
Copy link

使用了Icon.createFromIconfontCN方法之后，引用的antd design 自带的图标变成了两个，是什么原因呢

@zombieJ
Copy link
Member

zombieJ commented Feb 21, 2019

使用了Icon.createFromIconfontCN方法之后，引用的antd design 自带的图标变成了两个，是什么原因呢

开个 issue，发重现看看哈~

@afc163
Copy link
Member

afc163 commented Feb 21, 2019

引用了多个版本的 antd 样式的问题。

@csyanghan csyanghan mentioned this issue May 16, 2019
Closed
@zombieJ zombieJ mentioned this issue May 31, 2019
Closed
@wangkailang wangkailang mentioned this issue Jul 5, 2019
Open
@muzea muzea mentioned this issue Aug 15, 2019
Closed
1 task
@zombieJ zombieJ mentioned this issue Jan 4, 2020
Closed
@zombieJ zombieJ mentioned this issue Feb 28, 2020
Closed
@THPubs THPubs mentioned this issue Apr 27, 2020
Closed
1 task
@tang9716
Copy link

tang9716 commented May 7, 2020

请问一下怎么实现icon图标的style不支持font-weight吗，怎么让他变粗呢

@SingularityZed
Copy link

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

你可以使用e.currentTarget.id来获取，因为编译时可能层级之间被添加了别的层级

@bao2314483
Copy link

我想问下2.1.2版本如何扩展自定义SVG图标,我发现官方文档是错的

@bao2314483
Copy link

createFromIconfontCN能不能提供一个引用本地文件的属性,而不是引用网上资源,有些项目是不同外网的

@xingorg1
Copy link

使用 SVG 图标替换 font 图标后，想要循环生成结构（比如menu菜单）时，怎么循环生成对应菜单不同的图标呢？有实现过的伙伴么

@wll8
Copy link

wll8 commented Sep 14, 2021

@xingorg1 这个可能得看看 vue 文档

@xingorg1
Copy link

@xingorg1 这个可能得看看 vue 文档

@wll8 嗯，最后使用动态组件了

@Fengjing95
Copy link

求助：如何使用类似require.context()类似的API来批量导入svg，然后导出自定义的Icon组件

@yoyo837
Copy link
Contributor

yoyo837 commented Sep 14, 2021

求助：如何使用类似require.context()类似的API来批量导入svg，然后导出自定义的Icon组件

对于你所有需要用到的icon是已知的吗?

@Fengjing95
Copy link

求助：如何使用类似require.context()类似的API来批量导入svg，然后导出自定义的Icon组件

对于你所有需要用到的icon是已知的吗?

对，本地的

@yoyo837
Copy link
Contributor

yoyo837 commented Sep 14, 2021

把这些需要的都import 进来. 编成一个map, 菜单循环的时候用

@Fengjing95
Copy link

把这些需要的都import 进来. 编成一个map, 菜单循环的时候用

现在就是单个文件导入的，想找一个自动化的方法，省得以后多了不好维护😂

@yangzheli yangzheli mentioned this issue Dec 31, 2021
Closed
1 task
@badPumps
Copy link

antd vue 2.x 版本的图标怎么按需引用，找遍全网也没有，通过cdn的方式引入也没有

@github-actions github-actions bot mentioned this issue Mar 17, 2023
Closed
@xkyong xkyong mentioned this issue Mar 14, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests