Aliran kerja SVG yang berfungsi untuk ikon yang boleh diakses

Menggunakan fon ikon umumnya tidak digalakkan kerana membuat ketidakkonsistenan, isu kebolehcapaian, dan batasan semantik. Artikel ini menggariskan aliran kerja yang diperkemas untuk membuat dan melaksanakan ikon SVG yang boleh diakses, memanfaatkan kuasa sprite SVG.

Walaupun SVGs mungkin kelihatan rumit, pendekatan ini memudahkan proses. Kami akan menggunakan ikon yang sedia ada dan mengautomasikan penjanaan sprite untuk pengurusan yang cekap.

Kelebihan utama:

• Mengelakkan perangkap fon ikon.
• memudahkan pengurusan SVG dengan generasi sprite automatik.
• menyediakan komponen ikon yang mudah diguna semula.
• mengutamakan kebolehcapaian melalui penggunaan tag <title></title> dan <desc></desc>.

Gambaran keseluruhan aliran kerja:

1. Ikon sumber: memperoleh ikon SVG (mis., Dari Icomoon). Bersihkan fail SVG, mengeluarkan metadata yang tidak perlu untuk meminimumkan saiz sprite.
2. Generasi Sprite: Gunakan alat seperti spritesh (boleh dipasang melalui NPM: npm install spritesh -g) untuk menghasilkan sprite SVG dari fail ikon individu anda. Ini menyatukan semua ikon ke dalam satu fail untuk memuatkan yang cekap. Perintah Contoh: spritesh --input assets/images/icons --output _includes/sprite.svg --viewbox "0 0 16 16" --prefix icon-
Kemasukan Sprite:
3. Sertakan sprite yang dihasilkan dalam susun atur utama anda (mis., Menggunakan di Jekyll). {% include sprite.svg %} Komponen ikon:
Buat komponen yang boleh diguna semula (mis., Jekyll termasuk atau komponen React) menggunakan tag
4. ke ikon rujukan dari sprite. Komponen ini harus membolehkan penyesuaian mudah kelas, , dan atribut kebolehaksesan. <use></use> viewBox Kebolehcapaian:
Komponen ikon hendaklah termasuk
5. dan tag untuk menyediakan konteks untuk pembaca skrin, meningkatkan kebolehcapaian. Deskripsi ini mestilah konteks khusus, ditambah secara dinamik berdasarkan penggunaan ikon. <title></title> <desc></desc>

Contoh Icon Component (Jekyll):

Contoh Icon Component (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>

Pengoptimuman:

Mengintegrasikan alat seperti SVGO (

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;

) untuk mengoptimumkan fail SVG sebelum generasi sprite untuk prestasi yang lebih baik. Gunakan skrip NPM untuk mengautomasikan proses ini.

Aliran kerja ini menyediakan penyelesaian yang mantap, boleh dipelihara, dan boleh diakses untuk menguruskan ikon SVG dalam projek anda. Ingatlah untuk sentiasa menguji ikon anda merentasi penyemak imbas dan pembaca skrin yang berbeza untuk memastikan kebolehcapaian yang optimum.

Atas ialah kandungan terperinci Aliran kerja SVG yang berfungsi untuk ikon yang boleh diakses. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!