可访问图标的工作SVG工作流程

>通常由于渲染不一致，可访问性问题和语义限制而使用图标字体通常不建议使用。 本文概述了用于创建和实现可访问的SVG图标的简化工作流程，利用SVG Sprites的功能。

虽然SVG看起来很复杂，但这种方法简化了过程。我们将利用随时可用的图标，并自动化Sprite生成来进行高效的管理。

键优点：

避免了图标字体的陷阱。

• >用自动精灵生成简化了SVG管理。
提供了易于重复使用的图标组件。
通过使用
• >和
标签来确定可访问性。
• > <title></title> <desc></desc>
工作流程概述：

源图标：

获取svg图标（例如，来自icomoon）。 清理SVG文件，删除不必要的元数据以最大程度地减少Sprite的尺寸。
Sprite生成：
2. >使用之类的工具（可通过npm：安装）从您的单个图标文件中生成SVG Sprite。 这将所有图标整合到一个文件中以进行有效的加载。 示例命令：spritesh npm install spritesh -g spritesh --input assets/images/icons --output _includes/sprite.svg --viewbox "0 0 16 16" --prefix icon->
> sprite包含：
3. >在您的主布局中包括生成的精灵（例如，在jekyll中使用）。> {% include sprite.svg %}>
图标组件：使用 tag创建可重复使用的组件（例如，jekyll incept或react react component），以从精灵中引用图标。此组件应允许轻松自定义类，
4. 和可访问性属性。 可访问性：<use></use>图标组件应包括viewBox和
标签，以为屏幕读取器提供上下文，从而增强可访问性。 这些描述应针对特定于上下文，并根据图标的用法动态添加。
5. > <title></title> <desc></desc>
>

示例图标组件（jekyll）：

>

>

示例图标组件（react）：>

{% capture id %}{% increment uniqueid %}{% endcapture %}
<svg viewBox="0 0 16 16" role="img" class="icon icon-{{ include.icon }}" aria-labelledby="{% if include.title %}title-{{ id }}{% endif %}{% if include.desc %} desc-{{ id }}{% endif %}">
  {% if include.title %}
  <title id="title-{{ id }}">{{ include.title }}</title>
  {% endif %}
  {% if include.desc %}
  <desc id="desc-{{ id }}">{{ include.desc }}</desc>
  {% endif %}
  <use xlink:href="#icon-{{ include.icon }}"></use>
</svg>

优化：

集成像svgo（）这样的工具，以优化SVG文件，以提高性能，以提高性能。 使用NPM脚本来自动化此过程。>

>此工作流提供了一个可靠，可维护且可访问的解决方案，用于管理项目中的SVG图标。请记住，请始终在不同的浏览器和屏幕读取器上测试您的图标，以确保最佳可访问性。

import { uniqueId } from 'lodash';

const Icon = (props) => {
  const id = uniqueId();
  return (
    <svg role="img" viewBox="0 0 16 16" className={`icon icon-${props.icon}`} aria-labelledby={
      (props.title ? `title-${id}` : '') +
      (props.desc ? ` desc-${id}` : '')
    }>
      {props.title && <title id={`title-${id}`}>{props.title}</title>}
      {props.desc && <desc id={`desc-${id}`}>{props.desc}</desc>}
      <use xlinkHref={`#icon-${props.icon}`} />
    </svg>
  );
};

export default Icon;

>

以上是可访问图标的工作SVG工作流程的详细内容。更多信息请关注PHP中文网其他相关文章！