可訪問圖標的工作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中文網其他相關文章！