icon图标深入指南

图标是网络上常用的元素。它们是通用的，可以立即识别，可以非常吸引人，引起注意，并且（如果使用正确）可以提供出色的用户体验。

在网络上实现图标时，我们有很多选择：

Icon Spritesheet – 图标精灵(雪碧图)
Icon font – 图标字体
Inlined SVG – 内联SVG
SVG as an image element – SVG作为图像元素

它们中的一些如今已很常见，例如SVG元素(SVG elements)和Icon字体。在本文中，我们将深入研究在Web上实现Icon的每种方法，并看看哪种方法在性能、可访问性、样式选项和浏览器支持方面是最佳的。

一、Icon Spritesheet（图标精灵）

我们通过将较小的图像（icon）文件合并为一个较大的文件来创建Icon Spritesheet。我们需要使用CSS background-image，background-size和background-position来显示Spritesheet中的图像。

雪碧图示例

我们可以使用SVG Spritesheet结合PNG Spritesheet来确保图标在各种显示（常规和视网膜）上看起来都不错，以作为旧版浏览器的后备。我们可以使用像Modernizr（https://modernizr.com/）这样的JavaScript库来检测用户浏览器是否支持SVG，如果不支持SVG，则提供PNG后备。

让我们创建一个可访问的图标：

<span aria-hidden="true" class="icon icon--email"></span> 

<span class="hidden--visually">给我发邮件</span>

Spritesheet CSS示例（可以生成或手动添加）：

.icon {

  background-image: url('../images/spritesheet.svg');

  background-repeat: no-repeat;

  display: inline-block;

  width: 64px;

  height: 64px;

}

.no-svg .icon {

  background-image: url('../images/spritesheet.png');

}

.icon--email {

  width: 64px;

  height: 64px;

  background-position: 0px 0px;

}

如果您想了解隐藏的可视化CSS类以及如何可访问地隐藏内容，我已经在我以前的一篇文章中对其进行了详细说明（accessibility-hiding-content）。

我们在bootstrap里面看到aria-hidden属性的使用，如：

<div id="modal" class="modal" aria-hidden="true">

   <div class="modal-header">...</div>

   <div class="modal-body">...</div>

   <div class="modal-footer">...</div>

</div>

现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden=“true” 属性。

https://v3.bootcss.com/javascript/#modals

让我们看一下使用图标精灵表的利弊。

优点：

添加图标的过程可以轻松实现自动化。
图像优化技术可以减少Spritesheet文件的大小。
在所有显示器上均可正常使用（使用SVG Spritesheet时）。
强大的浏览器支持（使用PNG后备广告时）。
减少请求数（在不使用HTTP / 2时有用）。

缺点：

开箱即用，无法访问。需要使用其他HTML元素手动添加可访问性。
差的样式选项。
图标的所有变体都需要作为一个单独的元素添加到Spritesheet中。
如果多个人同时向其添加新图标，则可能会发生冲突。
使用HTTP / 2时没有性能优势。

一些工具：

Sprite Cow，在线Spritesheet图像和CSS生成器。（http://www.spritecow.com/）
PostCSS lazysprite，PostCSS插件，用于自动生成Spritesheet图像和CSS。（https://www.npmjs.com/package/postcss-lazysprite）
gulp-svg-sprite-Gulp插件，用于自动生成Spritesheet图像和CSS。（https://www.npmjs.com/package/gulp-svg-sprite）

二、Icon font（图标字体）

我们可以将包含图标的字体文件生成，而不是将我们的图标图像文件组合成单个图像文件。浏览器会将它们视为文本，并且可以使用文本样式轻松自定义它们。

有许多工具可以使图标字体文件和CSS文件的生成非常容易且易于管理。生成的CSS文件如下所示：

/* 定义字体图标字体系列 */

@font-face {

    font-family: 'myIconFont';

    src: url('/path/to/myIconFont.ttf?r9c57c') format('truetype'),

        url('/path/to/myIconFont.woff?r9c57c') format('woff'),

        url('/path/to/myIconFont.svg?r9c57c#myIconFont') format('svg');

    font-weight: normal;

    font-style: normal;

}

/* 定义用于设置字体系列和共享字体样式的图标类 */

.icon {

    font-family: 'myIconFont';

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

/* 定义单个图标类，该图标类将图标插入为伪元素中的字符 */

.icon--email::before {

    content: '\e900';

}

我们可以使用类似的标记来创建一个可访问的图标：

<span aria-hidden="true" class="icon icon--email"></span> 

<span class="hidden--visually">给我发邮件</span>

让我们看一下使用字体图标的利弊。

优点：

良好的优化选项。
可轻松编辑并使用各种工具生成。
强大的浏览器支持。
真正简单易用。

缺点：

字体抗锯齿可能会导致图标渲染出现问题。
下载和加载字体文件时无显示。
如果用户使用特定的字体或样式覆盖，可以很容易地覆盖。
开箱即用，无法访问。辅助功能需要手动添加。

一些工具：

iconfont-阿里巴巴矢量图标库（https://www.iconfont.cn/）
icomoon-管理和生成图标字体文件和CSS（https://icomoon.io/）
fontello-管理和生成图标字体文件和CSS（http://fontello.com/）
icon-font-generator-NPM插件，用于从SVG图标生成图标字体（https://www.npmjs.com/package/icon-font-generator）

三、Inline SVG icons（内联SVG）

我们可以直接将SVG数据插入HTML文档中，而无需包括一些文件（spritesheet或图标字体）并在CSS的标记中添加图标，而是浏览器将解析并显示SVG元素。内联SVG元素是高度可定制的，因为我们甚至可以设置单个SVG元素的样式。

让我们看一下使用嵌入式SVG的可访问图标的外观：

<svg labelledby="titleId descId" role="group">

    <title id="titleId">标题</title>

    <desc id="descId">说明</desc>

    <!-- SVG图标代码 -->

</svg>

我们使用带有title和desc SVG元素的labelledby=“titleId descId”使辅助设备可以访问该元素。还需要注意的是，应在辅助设备应忽略的SVG元素的图形部分上使用role=“presentation”。

让我们看一下使用嵌入式SVG图标的利弊。

优点：

无需额外的加载时间即可加载HTML文档。
没有其他HTTP请求。
良好的可访问性支持，无需其他HTML元素。
在各种屏幕上看起来很棒。
就样式选项而言最好（甚至可以对元素内的元素进行样式设置）。

缺点：

复杂的HTML文档标记（取决于所使用的框架）。
难以管理和维护（取决于所使用的框架）。
图标未缓存。
不支持某些较旧（且使用较少）的浏览器。

注意：
一些框架使图标的管理和维护更加容易。例如，Webpack可以将所有导入MyIcon从“/path/to/myIcon.svg”转换为生产版本上的内联SVG。因此对于开发人员来说，我们有一个易于维护的简单标记。

四、SVG作为图像元素

我们可以将图标保留为单独的文件，而不必使用HTML中的整个SVG标记，而是使用<img>这个HTML元素将其包含在我们的标记中。这使我们能够拥有简单且可维护的标记以及较小的文件大小。我们还可以将元素的本机可访问性功能用于图标。

让我们使用这种方法创建一个可访问的图标：

<img src="email.svg" alt="给我发邮件">

我们可以使用srcset为较旧的浏览器用PNG来“替补”：

<img src="email.png" alt="给我发邮件" srcset="email.svg">

img 元素的 srcset 属性常用于浏览器根据宽、高和像素密度来加载相应的图片资源。
属性格式：图片地址宽度描述w 像素密度描述x，多个资源之间用逗号分隔。例如：

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

支持srcset的浏览器也支持SVG元素，它们将自动加载SVG图像。不支持它的浏览器将加载PNG后备。

让我们看一下在图像元素中使用SVG的利弊。

优点：

简单标记。
内置带有alt标签的简单辅助功能选项。
良好的浏览器支持（如果使用PNG后备）。
图像文件大小可以优化。
图像文件可以缓存（一次下载）。

缺点：

不好的样式选择。
图标的每个变体（例如，不同的颜色）应放在单独的文件中。
每个图标都需要一个服务器请求（如果未缓存的话）。

原文：https://xushanxiang.com/2019/12/web-icon-depth-guide.html