search

bytedance / IconPark

🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons
http://iconpark.bytedance.com/
Apache License 2.0
8.29k stars 498 forks source link

开发环境使用链接引入图标可以正常显示，服务器打包后引入报错 #376

Open BaoXiaoShuai opened 2 years ago

BaoXiaoShuai commented 2 years ago

情景:

   开发环境使用链接引入图标可以正常显示，服务器打包后引入报错

当前问题: 开发环境使用链接引入图标可以正常显示，服务器打包后引入报错 报错如下： SpdUIYng4n kQf3HcePZp

开发使用： react umijs

尝试方法： 更换成非压缩链接，依旧不可用

希望达成: 本地与服务器端都正常显示

感谢大佬解答.

loveDstyle commented 2 years ago

这个看起来是 non-ascii 字符在某些浏览器上解析的问题，报错的浏览器信息可以提供下吗

BaoXiaoShuai commented 2 years ago

这个看起来是 non-ascii 字符在某些浏览器上解析的问题，报错的浏览器信息可以提供下吗

开发时本地使用的是谷歌版本 96.0.4664.55（正式版本） (arm64) 没有问题 发布到服务器上使用也是使用 谷歌版本 96.0.4664.55（正式版本）(arm64) 显示不出来 在Safari浏览器显示正常，还请您看下问题是怎么回事呢？

loveDstyle commented 2 years ago

这个看起来是 non-ascii 字符在某些浏览器上解析的问题，报错的浏览器信息可以提供下吗

开发时本地使用的是谷歌版本 96.0.4664.55（正式版本） (arm64) 没有问题 发布到服务器上使用也是使用 谷歌版本 96.0.4664.55（正式版本）(arm64) 显示不出来 在Safari浏览器显示正常，还请您看下问题是怎么回事呢？

报错的浏览器和开发时不报错的浏览器版本一模一样吗...

BaoXiaoShuai commented 2 years ago

这个看起来是 non-ascii 字符在某些浏览器上解析的问题，报错的浏览器信息可以提供下吗

开发时本地使用的是谷歌版本 96.0.4664.55（正式版本） (arm64) 没有问题 发布到服务器上使用也是使用 谷歌版本 96.0.4664.55（正式版本）(arm64) 显示不出来 在Safari浏览器显示正常，还请您看下问题是怎么回事呢？

报错的浏览器和开发时不报错的浏览器版本一模一样吗...

是的，是一样的，所以才感觉有问题。。。。。。🤔

loveDstyle commented 2 years ago

我出了一份 去除 non-ascii 字符的链接你实验一下： https://lf3-static.bytednsdoc.com/obj/eden-cn/bqaeh7vhobd/icon_debug.js

loveDstyle commented 2 years ago

我出了一份 去除 non-ascii 字符的链接你实验一下： https://lf3-static.bytednsdoc.com/obj/eden-cn/bqaeh7vhobd/icon_debug.js

把这个用作图标代码链接，看下报错浏览器上运行如何吧，使用形式如图 image

BaoXiaoShuai commented 2 years ago

我出了一份 去除 non-ascii 字符的链接你实验一下： https://lf3-static.bytednsdoc.com/obj/eden-cn/bqaeh7vhobd/icon_debug.js

可以了！现在本地和线上都可以显示成功了，那这个我直接使用这个呢？还是怎么使用呢？

loveDstyle commented 2 years ago

可以了！现在本地和线上都可以显示成功了，那这个我直接使用这个呢？还是怎么使用呢？

这个链接里的代码是我手动调整的，相应改动应用到平台中的话还是要做一些改动&开发的，以及需要调研下把non-ascii字符转为unicode编码作为js对象propertyName的影响。预计顺利的话，下周一改动上线吧，主要担心这么一改 别的浏览器反而会出问题

BaoXiaoShuai commented 2 years ago

可以了！现在本地和线上都可以显示成功了，那这个我直接使用这个呢？还是怎么使用呢？

这个链接里的代码是我手动调整的，相应改动应用到平台中的话还是要做一些改动&开发的，以及需要调研下把non-ascii字符转为unicode编码作为js对象propertyName的影响。预计顺利的话，下周一改动上线吧，主要担心这么一改 别的浏览器反而会出问题

还请尽快调整。。。。我们现在涉及到上线问题，那目前有什么临时的替代方案吗？

loveDstyle commented 2 years ago

如果你就是需要这20个图标，那么当前这个链接是可用的。你也可以采用svg symbol链接方案来使用图标 ，这里生成的js代码应该是没有non-ascii字符的https://bytedance.feishu.cn/docs/doccngyDdQ0qB1i1YjypTdkn49g

BaoXiaoShuai commented 2 years ago

如果你就是需要这20个图标，那么当前这个链接是可用的。你也可以采用svg symbol链接方案来使用图标 ，这里生成的js代码应该是没有non-ascii字符的https://bytedance.feishu.cn/docs/doccngyDdQ0qB1i1YjypTdkn49g

好的，感谢您的回复，期待这个问题的解决。😁

BaoXiaoShuai commented 2 years ago

如果你就是需要这20个图标，那么当前这个链接是可用的。你也可以采用svg symbol链接方案来使用图标 ，这里生成的js代码应该是没有non-ascii字符的https://bytedance.feishu.cn/docs/doccngyDdQ0qB1i1YjypTdkn49g

请问这个修复上线了吗？

loveDstyle commented 2 years ago

如果你就是需要这20个图标，那么当前这个链接是可用的。你也可以采用svg symbol链接方案来使用图标 ，这里生成的js代码应该是没有non-ascii字符的https://bytedance.feishu.cn/docs/doccngyDdQ0qB1i1YjypTdkn49g

请问这个修复上线了吗？

sorry 没有及时回复，当时已经调整了上传的代码的encoding，可以再看下现在更新的代码还有没有此问题～