دسترسی به بیش از 500 آیکون رایگان با Tabler Icons

تاریخ: پنجشنبه, 12 تیر 1399

---

---

 در این مطلب قصد دارم تا شما رو با یک پک از آیکون های مفید و کاربردی آشنا کنم که به کمک آن قادر خواهید بود تا از بیش از 500 آیکون رایگان با لایسنس MIT استفاده کنید ،پس در ادامه این مطلب همراه ما باشید.

تابلر آیکون (به لاتین Tabler Icons) یک بسته مفید و کاربردی هست که امکان استفاده از بیش از 500 آیکون رو به شکل رایگان در قالب فایل های SVG و با کیفیت رو در اختیار شما قراره میده که شما می تونید به سادگی از اون در پروژه های تحت وب خودتون استفاده کنید. شما همچنین این امکان رو دارید که به کمک ماژول NPM و یا قرار دادن کد SVG در دایرکتوری پروژه ی خودتون و فایل های html خودتون از تابلر استفاده کنید.

برای درک ساده تر این موضوع قطعه کد زیر رو بررسی کنید:

<svg xmlns="http://www.w3.org/2000/svg"
    class="icon icon-tabler icon-tabler-disabled"
    width="24" height="24" viewBox="0 0 24 24"
    stroke-width="1.25" stroke="currentColor" fill="none"
    stroke-linecap="round" stroke-linejoin="round">
      ...
  </svg>

از طرف دیگر می توان در پروژه از svg به شکل زیر استفاده کنید و تغییراتی در اندازه ها داشته باشید:

<svg width="24" height="24">
  <use xlink:href="path/to/tabler-sprite.svg#tabler-activity"/>
</svg>

البته با استفاده از css روی آیکون ها شما قادر خواهید بود تا آیکون های خود رو در سایز و اندازه های مختلف داشته باشید و از اونها استفاده کنید. مثلا به شکل تصویر زیر:

خب پس خیلی ساده می تونید با استفاده از css به شکل زیر تغییراتی در رنگ ،اندازه و... رو داشته باشید:

.icon-tabler {
  color: red;
  width: 32px;
  height: 32px;
  stroke-width: 1.25;
}

برای استفاده از این آیکون ها خیلی ساده می تونید اون رو از npm و با استفاده از کد زیر نصب کنید:

npm install tabler-icons --save

و یا فایل کلی اون رو از گیت هاب دانلود و استفاده کنید:

لینک دانلود

در نهایت برای دریافت اطلاعات بیشتر در رابطه با تابلر ،راهنمای استفاده و... می تونید از لینک زیر وارد گیت هاب این پروژه بشید و اطلاعات بیشتری رو دریافت کنید:

لینک گیت هاب

 نظر شما چیست؟ شما می توانید نظرات ،پیشنهادات و اطلاعات خود را در رابطه با این مطلب و موضوعات مربوط از طریق قسمت نظرات با ما و سایر بازدیدکنندگان در میان بگذارید.

---

---