Skip to content
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.

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

feat(svg-icon):插件svg-icon #551

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Conversation

Cyberhan123
Copy link

@Cyberhan123 Cyberhan123 commented Mar 11, 2021

我觉得svg是一个比较常用的功能,这个插件通过配置svgo和svg-sprite-loader,达到非常优雅的使用svg的目的

@codecov
Copy link

codecov bot commented Mar 11, 2021

Codecov Report

Merging #551 (67455f9) into master (99636ca) will increase coverage by 0.62%.
The diff coverage is 84.21%.

❗ Current head 67455f9 differs from pull request most recent head f22c941. Consider uploading reports for the commit f22c941 to get more accurate results
Impacted file tree graph

@@            Coverage Diff             @@
##           master     #551      +/-   ##
==========================================
+ Coverage   46.65%   47.27%   +0.62%     
==========================================
  Files          66       67       +1     
  Lines        1584     1599      +15     
  Branches      443      439       -4     
==========================================
+ Hits          739      756      +17     
+ Misses        844      842       -2     
  Partials        1        1              
Impacted Files Coverage Δ
packages/plugin-svg-icon/src/index.ts 84.21% <84.21%> (ø)
packages/plugin-esbuild/src/index.ts 100.00% <0.00%> (ø)
packages/plugin-dva/src/index.ts 69.89% <0.00%> (+0.41%) ⬆️
packages/plugin-locale/src/index.ts 82.35% <0.00%> (+0.53%) ⬆️
packages/plugin-model/src/helpers/executor.tsx 73.07% <0.00%> (+9.74%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c927a16...f22c941. Read the comment docs.

@Cyberhan123 Cyberhan123 changed the title 贡献插件svg-icon feat:插件svg-icon Mar 25, 2021
@Cyberhan123 Cyberhan123 changed the title feat:插件svg-icon feat(svg-icon):插件svg-icon Mar 25, 2021
@sorrycc
Copy link
Member

sorrycc commented Mar 25, 2021

看用例使用还是有点麻烦,和 svg as component 的方式区别是啥?

@Cyberhan123
Copy link
Author

看用例使用还是有点麻烦,和 svg as component 的方式区别是啥?

我稍后会整理一下他们的区别,然后更新一下用例,并且打算把Icon这个组件内置到插件中

@Cyberhan123
Copy link
Author

Cyberhan123 commented Apr 19, 2021

看用例使用还是有点麻烦,和 svg as component 的方式区别是啥?

svgo更新新版本了,最跟1.x完全不一样,我最近忙于业务,估计要过点时间去完善了

@Cyberhan123
Copy link
Author

Cyberhan123 commented May 6, 2021

看用例使用还是有点麻烦,和 svg as component 的方式区别是啥?

@sorrycc 我总结了一下:

svg 优点多多,但是,通常我们获得的 svg 图片并不能直接使用,因为它们可能来自第三方 svg 组件库,或者来自设计师的原稿输出,这些 svg 如果直接使用 svg as component 可能存在以下痛点:

  1. 我们需要 svg 图标携带 hover 样式,但是 svg 被填充了 fill 属性

  2. 内置的样式可能需要我们手动删除,来实现动态样式

  3. 携带一些内部敏感信息需要屏蔽

  4. 一个 svg 中的某部分全局中基本都有运用,但由于包裹的 svg 父元素不同可能会被多次请求。

当 icon 变得非常多的时候这将是重复的体力劳动。

我个人目前推荐对 svg 使用的是本插件的 svg-icon 与 svg as component 结合使用:

  1. svg 确实需要内联样式的效果需要定制。

  2. 有些 svg 不是全局 icon,而是单一引用,并且非常庞大还是需要使用 svg as component。

现在我将依赖升级到了最新,并且增加了直接从umi导出的简易模板,感觉使用起来应该没有太多心智负担了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants