feat: support icons:generate #761

thinkasany · 2024-04-03T02:04:00Z

💡 Background and solution

参考@Wxh16144 大佬 pr(ant-design/ant-design-icons#635), 实现了icon-preview(通过jsdoc, 鼠标放在组件上可以看到icon的样式)，因为打包方式、产物以及命名上有一些不同，所以在代码上略有改造。

这个同步脚本应该后续也用得上，略加改造同步 svg 可以提高后续添加 svg 的效率直接拖入图片就可以转成组件代码，降低cv和命名心智，

目前部分目录会有点问题，佬们看看是需要重命名呢，还是跳过这些文件，还是完善正则去兼容。

changeset-bot · 2024-04-03T02:04:04Z

⚠️ No Changeset found

Latest commit: 99a5399

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2024-04-03T02:04:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ant-design-web3	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 7, 2024 2:46am

github-actions · 2024-04-03T02:04:13Z

codecov · 2024-04-03T02:11:58Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (d5cebe7) to head (99a5399).

Additional details and impacted files

@@            Coverage Diff            @@
##              main      #761   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          646       646           
  Lines        17671     17671           
  Branches      1099      1099           
=========================================
  Hits         17671     17671

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

kiner-tang

LGTM

thinkasany · 2024-04-03T06:45:21Z

从刷下来的结果看一共会遇到以下几个问题：

一、需要调整svg的filename

TokenPocketColorful: 文件名 tokenpocket-colorful.svg，我想把它改成token-pocket-colorful.svg
ImTokenColorful: 文件名 imtoken-colorful.svg，我想把它改成im-token-colorful.svg
MetaMaskColorful：文件名metamask-colorful.svg，我想把它改成meta-mask-colorful.svg
OneInchColorful：文件名oneinch-colorful.svg，我想把它改成one-inch-colorful.svg
TwoKeyCircleColorful：文件名twokey-circle-colorful.svg，我想把它改成two-key-circle-colorful.svg

二、svg 和组件不是完全对应的驼峰以及Kebab关系的情况

OkxWalletColorful，文件名okx-colorful.svg，我想把它改成okx-wallet-colorful.svg

三、币名没有简写导致的问题，其实里面有时候会出现有的简写有的复杂了的问题

PancakeSwapColorful, 文件名 pancakeswap-colorful.svg, 我想把它改成 cake-colorful.svg(CakeColorful)
SushiSwapColorful，文件名 sushiswap-colorful.svg， sushi-colorful.svg(SushiColorful)

我的计划是三个pr，第一个完成这个脚本的完善优化，第二个去做以上的重命名，第三个纯粹的去更新icon。

期待你们的评价和建议～
cc @kiner-tang @yutingzhao1991 @jeasonstudio

Likang0122 · 2024-04-03T07:27:12Z

从刷下来的结果看一共会遇到以下几个问题：

一、

TokenPocketColorful: 文件名 tokenpocket-colorful.svg，我想把它改成token-pocket-colorful.svg

ImTokenColorful: 文件名 imtoken-colorful.svg，我想把它改成im-token-colorful.svg

MetaMaskColorful：文件名metamask-colorful.svg，我想把它改成meta-mask-colorful.svg

OneInchColorful：文件名oneinch-colorful.svg，我想把它改成one-inch-colorful.svg

TwoKeyCircleColorful：文件名twokey-circle-colorful.svg，我想把它改成two-key-circle-colorful.svg

二、svg 和组件不是完全对应的驼峰以及Kebab关系的情况

OkxWalletColorful，文件名okx-colorful.svg，我想把它改成okx-wallet-colorful.svg

三、币名没有简写导致的问题，其实里面有时候会出现有的简写有的复杂了的问题

PancakeSwapColorful, 文件名 pancakeswap-colorful.svg, 我想把它改成 cake-colorful.svg(CakeColorful)

SushiSwapColorful，文件名 sushiswap-colorful.svg， sushi-colorful.svg(SushiColorful)

我的计划是三个pr，第一个完成这个脚本的完善优化，第二个去做以上的重命名，第三个纯粹的去更新icon。

期待你们的评价和建议～ cc @kiner-tang @yutingzhao1991 @jeasonstudio

如果只是文件名改了，其实还好，就是看起来有点奇怪🤪 TokenPocket , imToken , MetaMask

这些都是有品牌规范的，such like

thinkasany · 2024-04-03T07:36:16Z

@Likang0122 其实我是想TokenPocket 转 kebab-case 为token-pocket，原文件名 tokenpocket-colorful.svg，看起来也不是驼峰也不是 kebab-case ，感觉挺奇怪的，但是最后还要听取大家意见，也可以选择跳过这几个文件保持原有的。

Likang0122 · 2024-04-03T07:45:44Z

@Likang0122 其实我是想TokenPocket 转 kebab-case 为token-pocket，原文件名 tokenpocket-colorful.svg，看起来也不是驼峰也不是 kebab-case ，感觉挺奇怪的，但是最后还要听取大家意见，也可以选择跳过这几个文件保持原有的。

趁着这次定一下就好，看怎么处理合适，而且这个 OneInch 没有 1inch 看起来更熟悉🤣

@kiner-tang @yutingzhao1991 @jeasonstudio @gin-lsl

yutingzhao1991 · 2024-04-03T08:57:46Z

改名这个我觉得不用改的，其实就是用小写的品牌名就可以，不用特地按照单词分割。比如 metamask 不会有人叫 meta mask 的。

yutingzhao1991 · 2024-04-03T08:58:43Z

@Likang0122 其实我是想TokenPocket 转 kebab-case 为token-pocket，原文件名 tokenpocket-colorful.svg，看起来也不是驼峰也不是 kebab-case ，感觉挺奇怪的，但是最后还要听取大家意见，也可以选择跳过这几个文件保持原有的。

趁着这次定一下就好，看怎么处理合适，而且这个 OneInch 没有 1inch 看起来更熟悉🤣

@kiner-tang @yutingzhao1991 @jeasonstudio @gin-lsl

1inch 这个主要是因为变量名没法以数字开头，所以特殊处理了。

thinkasany · 2024-04-03T09:29:08Z

改名这个我觉得不用改的，其实就是用小写的品牌名就可以，不用特地按照单词分割。比如 metamask 不会有人叫 meta mask 的。

二、三(非简写的有时候会遇到又新增了一个同一币种但是变成简写的情况)也没必要嘛（这俩里面的有点错误的样子），一的话是感觉那样子的命名会比较好兼容脚本，实在不行就在脚本中特殊处理这几个。

Likang0122 · 2024-04-03T09:52:43Z

改名这个我觉得不用改的，其实就是用小写的品牌名就可以，不用特地按照单词分割。比如 metamask 不会有人叫 meta mask 的。

二、三(非简写的有时候会遇到又新增了一个同一币种但是变成简写的情况)也没必要嘛（这俩里面的有点错误的样子），一的话是感觉那样子的命名会比较好兼容脚本，实在不行就在脚本中特殊处理这几个。

这些品牌名词不只是需要他的翻译意思，像 pancakeswap 改成 cake 就认不出来啦😄

thinkasany · 2024-04-03T10:01:56Z

改名这个我觉得不用改的，其实就是用小写的品牌名就可以，不用特地按照单词分割。比如 metamask 不会有人叫 meta mask 的。

二、三(非简写的有时候会遇到又新增了一个同一币种但是变成简写的情况)也没必要嘛（这俩里面的有点错误的样子），一的话是感觉那样子的命名会比较好兼容脚本，实在不行就在脚本中特殊处理这几个。

这些品牌名词不只是需要他的翻译意思，像 pancakeswap 改成 cake 就认不出来啦😄

我一开始是担心会不会出现这样子的问题，简写的和不简写的重复了，
因为我看cake币好像也能搜到。
目前icon的话，这里面九个会出现问题的，有可以改的么，都不行的话，我就只能加一段代码兼容去绕过这九个了。

Likang0122 · 2024-04-03T10:43:33Z

感觉 swap 的可以先不改，收集的时候应该就是按照 DEX 类的图标收集的， okx 那个可以改

thinkasany · 2024-04-07T02:46:10Z

那我就先不改其他的文件名了，针对可能会出问题的名字就用一个对象去跳过好了，保留原文件名，再看看 @Likang0122

jeasonstudio · 2024-04-07T03:01:06Z

packages/icons/scripts/generate.ts

+
+<%= svgIdentifier %>.displayName = '<%= svgIdentifier %>';
+
+`.trim(),


这里 trim 后会不会导致生成的 tsx 缺少文末换行符

从执行脚本的结果看好像没影响，并且pre-commit的格式化应该不会导致产生影响规范的事情发生。

thinkasany marked this pull request as draft April 3, 2024 02:04

thinkasany requested a review from kiner-tang April 3, 2024 02:05

vercel bot deployed to Preview April 3, 2024 02:05 View deployment

vercel bot deployed to Preview April 3, 2024 02:37 View deployment

kiner-tang approved these changes Apr 3, 2024

View reviewed changes

thinkasany requested review from yutingzhao1991 and jeasonstudio April 3, 2024 05:52

thinkasany added 2 commits April 7, 2024 10:32

feat: support icons:generate

164b64a

fix: opt camelCaseString

15f8401

thinkasany force-pushed the test-icon branch from fc29906 to 15f8401 Compare April 7, 2024 02:33

vercel bot deployed to Preview April 7, 2024 02:35 View deployment

chore: use IdentifierMap support camelToKebab

99a5399

vercel bot deployed to Preview April 7, 2024 02:46 View deployment

thinkasany marked this pull request as ready for review April 7, 2024 02:54

thinkasany merged commit fdca71d into ant-design:main Apr 7, 2024
9 checks passed

jeasonstudio reviewed Apr 7, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support icons:generate #761

feat: support icons:generate #761

thinkasany commented Apr 3, 2024 •

edited

changeset-bot bot commented Apr 3, 2024 •

edited

vercel bot commented Apr 3, 2024 •

edited

github-actions bot commented Apr 3, 2024 •

edited

codecov bot commented Apr 3, 2024 •

edited

kiner-tang left a comment

thinkasany commented Apr 3, 2024 •

edited

Likang0122 commented Apr 3, 2024 •

edited

thinkasany commented Apr 3, 2024

Likang0122 commented Apr 3, 2024

yutingzhao1991 commented Apr 3, 2024

yutingzhao1991 commented Apr 3, 2024

thinkasany commented Apr 3, 2024

Likang0122 commented Apr 3, 2024

thinkasany commented Apr 3, 2024 •

edited

Likang0122 commented Apr 3, 2024

thinkasany commented Apr 7, 2024

jeasonstudio Apr 7, 2024

thinkasany Apr 7, 2024


		<%= svgIdentifier %>.displayName = '<%= svgIdentifier %>';

		`.trim(),

feat: support icons:generate #761

feat: support icons:generate #761

Conversation

thinkasany commented Apr 3, 2024 • edited

💡 Background and solution

changeset-bot bot commented Apr 3, 2024 • edited

⚠️ No Changeset found

vercel bot commented Apr 3, 2024 • edited

github-actions bot commented Apr 3, 2024 • edited

codecov bot commented Apr 3, 2024 • edited

Codecov Report

kiner-tang left a comment

Choose a reason for hiding this comment

thinkasany commented Apr 3, 2024 • edited

Likang0122 commented Apr 3, 2024 • edited

thinkasany commented Apr 3, 2024

Likang0122 commented Apr 3, 2024

yutingzhao1991 commented Apr 3, 2024

yutingzhao1991 commented Apr 3, 2024

thinkasany commented Apr 3, 2024

Likang0122 commented Apr 3, 2024

thinkasany commented Apr 3, 2024 • edited

Likang0122 commented Apr 3, 2024

thinkasany commented Apr 7, 2024

jeasonstudio Apr 7, 2024

Choose a reason for hiding this comment

thinkasany Apr 7, 2024

Choose a reason for hiding this comment

thinkasany commented Apr 3, 2024 •

edited

changeset-bot bot commented Apr 3, 2024 •

edited

vercel bot commented Apr 3, 2024 •

edited

github-actions bot commented Apr 3, 2024 •

edited

codecov bot commented Apr 3, 2024 •

edited

thinkasany commented Apr 3, 2024 •

edited

Likang0122 commented Apr 3, 2024 •

edited

thinkasany commented Apr 3, 2024 •

edited