为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第16天 2022升级 React18+TS高仿AntD从零到一打造组件库

标签:
Html5

课程章节:第7章 他山之石 - Icon 组件 和 Transition 组件

主讲老师:张轩

课程内容:

今天学习的内容包括:

7-1 图标解决方案简介

课程收获:

一、css sprite 雪碧图
减少网络请求的压力
一是浏览器有一定的并发上限
二是网络延时,下载单个小图标的耗时远小时一次请求的网络延时
建议类似的图标合并
不建议大图标合并
提前加载图片
略微减少图片体积

二、base64
优点
base64的图片会随着html或者css一起下载到浏览器,减少了请求.
可避免跨域问题
缺点
老东西(低版本)的IE浏览器不兼容。
体积会比原来的图片大一点。
css中过多使用base64图片会使得css过大,不利于css的加载
应用场景
应用于小的图片几k的,太大的图片会转换后的大小太大,得不偿失。
用于一些css sprites不利处理的小图片,如一些可以通过background-repeat平铺来做成背景的图片。
生成base64
一些在线工具
webpack的url-loader
由于base64的特点,url-loader允许配置只对小于某一值的图标转换成base64,否则就会适得其反。
图片描述
三、icon font 字体图标
特点
纯色图标
矢量图标
优势
灵活性,改变图标的颜色,背景色,大小都非常简单
兼容性,兼容所有流行的浏览器,不仅h5可以使用iconfont,app也可以使用iconfont,关于这方面可以查看其它线上分享
扩展性,替换图标很方便,新增图标也非常简单,也不需要考虑图标合并的问题,图片方案需要css sprite
高效性,iconfont有矢量特性,没有图片缩放的消耗高
在使用上字体文件和普通的静态资源一样,既可以外链也可以内链,并且字体文件也可以使用gzip压缩
在移动端上,可以只使用truetype类型,非常灵活小巧
缺点
制作iconfont需要svg设计稿,对于开发来说没有图片来的方便
只能是纯色
webpack中如何配置?
webpack中一般使用url-loader处理4类字体文件,将体积较小的文件转化成base64置入到css中,体积较大的文件file-loader到指定images文件夹。

参考
浅尝iconfont-----AlloyTeam
腾讯前端团队对iconfont的使用总结
四、inline svg
优点
相对icon font,inline是真正的矢量
css 控制性好
语义化好
缺点
浏览器兼容性差,仅对IE9+有效
而icon font兼容广泛,包括IE6

参考
使用SVG代替icon font-----简书
Web 设计新趋势: 使用 SVG 代替 Web Icon Font
如果你还在使用iconfont作为网页图标的解决方案,就太out了。(玛德)
盘点几种使用svg图标的方法
总结
追求性能和代码优雅用svg
考虑兼容问题用iconfont

图库
阿里巴巴矢量图库
Font Awesome图库
优界网-背景图库banner-app素材
制作工具
fontello:只支持SVG格式的图片生成
icomoon:只支持SVG格式的图片生成。
icomoon使用方法
以图换字的方法
隐藏字体,显示背景。

设置text-indent:-9999px
也可以font-size: 0
图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
9
获赞与收藏
1

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消