استفاده از SVG برای آیکون‌ها

دلایل زیادی باعث شدند زمانی که پشتیبانی مرورگرها از SVG شرایط خوبی را پیدا کرد توسعه‌دهندگان برای آیکون‌ها از آیکون‌فونت‌ها به SVG مهاجرت کنند.

در ادامه در قالب ویدیو نحوه استفاده از پیاده‌سازی این مبحث را در فضای وب بررسی ‌می‌کنیم.
‌

روش‌های مختلف

روش خطی

در روش inline کافی است کد مربوط به آیکون‌ مورد نظر را بصورت مستقیم در HTML وارد کنیم:

<a href="">
  Subscribe
  <span class="inline-icon">
    <svg width="30" height="30" viewBox="0 0 30 30" class="inline-arrow-right__svg inline-icon__svg">
      <path d="M22.8 14.6L15.2 7l-.7.7 5.5 6.6H6v1.5h14l-5.5 6.6.7.7 7.6-7.6v-.9"></path>
    </svg>
  </span>
</a>

این نمونه در سایت گاردین برای دکمه‌ها در هدر سایت استفاده شده است.

روش داخلی

در این روش تمام آیکون‌های مورد نیاز را با استفاده از عنصر <symbol> تعریف می‌کنیم:

<svg width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">

  <symbol id="alert-triangle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
    <line x1="12" y1="9" x2="12" y2="13"></line>
    <line x1="12" y1="17" x2="12.01" y2="17"></line>
  </symbol>

  <symbol id="align-center" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <line x1="18" y1="10" x2="6" y2="10"></line>
    <line x1="21" y1="6" x2="3" y2="6"></line>
    <line x1="21" y1="14" x2="3" y2="14"></line>
    <line x1="18" y1="18" x2="6" y2="18"></line>
  </symbol>

  <symbol id="align-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <line x1="21" y1="10" x2="7" y2="10"></line>
    <line x1="21" y1="6" x2="3" y2="6"></line>
    <line x1="21" y1="14" x2="3" y2="14"></line>
    <line x1="21" y1="18" x2="7" y2="18"></line>
  </symbol>

  <symbol id="anchor" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="5" r="3"></circle>
    <line x1="12" y1="22" x2="12" y2="8"></line>
    <path d="M5 12H2a10 10 0 0 0 20 0h-3"></path>
  </symbol>


  <symbol id="zoom-out" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    <line x1="8" y1="11" x2="14" y2="11"></line>
  </symbol>

</svg><svg width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">

  <symbol id="alert-triangle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
    <line x1="12" y1="9" x2="12" y2="13"></line>
    <line x1="12" y1="17" x2="12.01" y2="17"></line>
  </symbol>

  <symbol id="align-center" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <line x1="18" y1="10" x2="6" y2="10"></line>
    <line x1="21" y1="6" x2="3" y2="6"></line>
    <line x1="21" y1="14" x2="3" y2="14"></line>
    <line x1="18" y1="18" x2="6" y2="18"></line>
  </symbol>

  <symbol id="align-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <line x1="21" y1="10" x2="7" y2="10"></line>
    <line x1="21" y1="6" x2="3" y2="6"></line>
    <line x1="21" y1="14" x2="3" y2="14"></line>
    <line x1="21" y1="18" x2="7" y2="18"></line>
  </symbol>

  <symbol id="anchor" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="5" r="3"></circle>
    <line x1="12" y1="22" x2="12" y2="8"></line>
    <path d="M5 12H2a10 10 0 0 0 20 0h-3"></path>
  </symbol>


  <symbol id="zoom-out" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    <line x1="8" y1="11" x2="14" y2="11"></line>
  </symbol>

</svg>

در کد بالا توجه کنید که چون قرار است این آیکون‌ها فقط تعریف شوند و در جاهای مختلف صفحه استفاده شوند، اولا از عنصر <symbol> استفاده کردیم که آیکون‌ها رسم نشوند، و همچنین عنصر svg اصلی را هم مخفی کرده‌ایم.

سپس می‌توان با استفاده از عنصر <use> از هریک از آیکون‌ها در موقعیت مورد نیاز استفاده کرد:

<button>
  <svg class="icon">
    <use href="#anchor"></use>
  </svg>
  <span>shoot</span>
</button>

همچنین برای کلاس .icon می‌توانیم استایل عمومی زیر را داشته باشیم:

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke: currentColor; /* or:  fill: currentColor; */
}

روش خارجی

روش اکسترنال در واقع همان روش بالا است با این تفاوت که به جای اینکه مجبور باشیم آیکو‌ن‌ها را در تمام صفحات داشته باشیم، آیکون‌ها را در یک فایل خارجی خواهیم داشت و در زمان استفاده از آیکون به آن فایل آدرس دهی می‌کنیم:

<!-- svg-icons.svg -->


<svg width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">

  <symbol id="alert-triangle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
    <line x1="12" y1="9" x2="12" y2="13"></line>
    <line x1="12" y1="17" x2="12.01" y2="17"></line>
  </symbol>

  <!-- More icons... -->

  <symbol id="align-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <line x1="21" y1="10" x2="7" y2="10"></line>
    <line x1="21" y1="6" x2="3" y2="6"></line>
    <line x1="21" y1="14" x2="3" y2="14"></line>
    <line x1="21" y1="18" x2="7" y2="18"></line>
  </symbol>

</svg>

به آدرس دهی آیکون دقت کنید:

<button>
  <svg class="icon">
    <use href="assets/svg-icons.svg#anchor"></use>
  </svg>
  <span>shoot</span>
</button>

لینک‌های مفید

• icomoon.io
• svgrepo.com
• icongr.am
• Feather Icon
• Feather Icon Sprites