Icon 小图标的发展历程
2020-07-31 14:26:05 0 举报AI智能生成
Icon 图标发展历程
作者其他创作
大纲/内容
远古时代
一个icon 图标一张图
近代
CSS Sprite （雪碧图）
利用css 的background-position使用不同的图标
优点
1、减少并发下载的需求
缺点
1、维护困难
Data URL (base64)
优点
1、减少并发下载的需求
缺点
1、大量图标塞到 css 甚至 html 中，就会增大它们的体积，
拖慢了整体渲染速度导致首屏展现变慢
拖慢了整体渲染速度导致首屏展现变慢
现代
字体图标
优点
1、字体图标本身就是字体
2、受到字号、前景色、行高等参数的控制
3、和普通文字混排
2、受到字号、前景色、行高等参数的控制
3、和普通文字混排
缺点
单色
当代
SVG
缺点
1、svg 也是图片，也有雪碧图和 Data URL 的优缺点
2、颜色不会自动跟随文字颜色
3、二是图标的大小不会自动跟随字体大小
2、颜色不会自动跟随文字颜色
3、二是图标的大小不会自动跟随字体大小
解决办法
1、利用currentColor，预定义的特殊颜色值，
它的意思就是取当前的文字颜色）弥补相对于字体图标的缺点（单色），支持彩色图标
2、使用em尺寸单位，图标大小设置为1em就会让图标的实际尺寸跟当前字号一致
它的意思就是取当前的文字颜色）弥补相对于字体图标的缺点（单色），支持彩色图标
2、使用em尺寸单位，图标大小设置为1em就会让图标的实际尺寸跟当前字号一致
优化
1、Tree Shaking 实际未被使用的图标应该自动被优化掉，并且从源码中删掉
2、单页面应用（SPA）并不需要同时下载大量的图标，而是按需加载
3、使用 svgo 对svg 图标体积优化
合字（Ligature）
定义
“囍”，它不是一个字，而是一个“合字”，两个汉字，只是显示成了一个字的样子。
Google 最早使用合字图标，<iclass="material-icons">home</i>就可以显示出一座房子。
Google 最早使用合字图标，<iclass="material-icons">home</i>就可以显示出一座房子。
原理
material-icons 类为这个 i元素指定了一个支持合字的字体库：'Material Icons'，
然后就会在字体库中检索出 home 这个合字对应的单字，并且把那个单字显示出来就可以了。
换句话说，home 是某个单字的别名。
然后就会在字体库中检索出 home 这个合字对应的单字，并且把那个单字显示出来就可以了。
换句话说，home 是某个单字的别名。
应用
无障碍阅读（给这个图标加上特殊的 aria-label等属性，以便屏幕阅读器朗读它们）
总结
图标技术，各有优缺点，适用于不同的场景，
根据需求和技术条件选型，可以混合使用，以发挥各自的优势
根据需求和技术条件选型，可以混合使用，以发挥各自的优势
收藏
0 条评论
下一页
