江苏龙网

  1. 首页 > 资讯 > 科技 > >

|小图标，大学问( 四 )


但是 ， 我们为什么不像 FontAwesome 那样直接引用这个单字 ， 而要用合字中转一次呢？在回答这个问题之前 ， 我们先要知道一个概念 ， 那就是：
访问互联网并不是我们这些健全人的专利！
世界上有很多残疾人 ， 特别是视障人士 ， 比如盲人、弱视等 ， 甚至等我们老了都有可能加入他们的行列 。 他们访问互联网时难以像我们一样凭视觉阅读网页 ， 而需要借助一种屏幕阅读器 。
屏幕阅读器无法理解某个单字表示的是房子形状的图标 ， 因此页面的编写者就需要给这个图标加上特殊的 aria-label等属性 ， 以便屏幕阅读器朗读它们 。 这称为 Accessibility（无障碍） ， 简称 a11y 。 回想一下 ， 你加过几个这种属性？很多人都不加 ， 因为麻烦 。 但使用合字就不需要考虑这种问题了 ， 因为合字本身就是可读的 ， 在 html 中的写法就像普通文本一样 。 所以 ， 你只要自然而然的使用合字 ， 就已经满足了 a11y 的一些要求 。
因此 ， 虽然“合字”本身没有多少新的技术 ， 但是我仍然把它归于“当代” ， 它值得作为一种趋势受到重视 。
图标在开发中的其它方面
在实际的开发工作中 ， 还有一些问题需要考虑 。
|小图标，大学问
本文插图

第一个问题是摇树优化 ， 也就是说 ， 我们没有实际使用到的图标应该自动被优化掉 ， 而不应该让我们手工检查哪些图标没用到 ， 并且从源码中删掉 。 前面的大多数方案都难以给出完美的答案 ， 只有内联 svg 方式是一个相对理想的方案 。 简单来说 ， 写一个构建工具 ， 当你在 html 中发现了一个 <img src=''path/to/file.svg''> 时 ， 把这个 svg 文件的内容读出来 ， 并且内联到 html 中 。 这样 ， 只要一个文件从未被引用过 ， 就会自动优化掉 。 如果你用基于 WebPack 的构建工具 ， 可以引入我写的一个 “markup-inline-loader” 。 当然 ， 如果你使用 Angular 这样的现代框架 ， 你就不需要为此做什么额外的工作了 。 你只要把每个图标做成一个组件 ， 使用 svg 内容作为模板 ， 然后像普通组件一样引用它就可以了 。 Angular 会自动帮你优化掉没有引用过的组件 。
第二个问题是 SPA 。 现代的前端应用基本上都是单页面应用（SPA） ， 因此往往并不需要同时下载大量的图标 ， 而是按需加载 。 因此 ， “古代”那种“一个图标一张图”的方式未必就真的不可接受 ， 针对你的实际业务场景 ， 做一下链路分析 ， 它没准反倒是最合适的方案 。
第三个问题是 svg 文件本身的优化 。 很多工具导出的 svg 文件很啰嗦 ， 里面有很多对于显示没有意义的东西 。 一些 svg 图标即使减小到原来体积的一半儿都不会影响显示 ， 因此 ， 针对 svg 本身做一些优化也是有价值的 。 当然 ， 这事不必手工来做 ， 有一个现成的工具可以做这事 ， 它叫做 svgo ， 你只要运行 npm i -g svgo命令就可以全局安装它了 。 你可以用 svgo命令对单个文件或者整个目录做优化；可以手工使用 ， 也可以把它集成到工具链里 。
结语
这些图标技术 ， 虽然出现时间上有先后 ， 但并不是简单的替代关系 ， 而是各有优缺点 ， 适用于不同的场景 。
随着需求和技术条件的变化 ， 选型策略也要做出调整 ， 有些时候还要混合使用 ， 以发挥各自的优势 。
【|小图标，大学问】文/ThoughtWorks汪志成


推荐阅读


上一篇：新机发布|金立祭出大招，新机重305克，网友：用来砸核桃吗？

下一篇：InfoQ|知“微”知彰，互联网企业的微服务5G创新有哪些从0到1？