تنزيل tabler icons - تنزيل tabler icons كود المصدر

tabler icons

شفرة المصدر الأخرى

Release 3.22.0

تنزيل

أيقونات الجدول

مجموعة من 5718 أيقونة SVG مجانية عالية الجودة مرخصة من معهد ماساتشوستس للتكنولوجيا لتستخدمها في مشاريع الويب الخاصة بك. تم تصميم كل أيقونة على شبكة مقاس 24 × 24 وحدود بحجم 2 بكسل.

تصفح على tabler-icons.io →

الرعاة

إذا كنت ترغب في دعم مشروعي ومساعدتي في تطويره، يمكنك أن تصبح راعيًا على GitHub أو فقط تتبرع على PayPal :)

معاينة

نسخة المخطط التفصيلي (4886 أيقونة)

النسخة المعبأة (832 أيقونة)

تثبيت

 npm install @tabler/icons --save

أو فقط قم بالتنزيل من GitHub.

الاستخدام

تم تصميم جميع الأيقونات باستخدام SVG، لذا يمكنك وضعها كـ <img> background-image ومضمّنة في تعليمات HTML البرمجية.

صورة HTML

إذا قمت بتحميل رمز كصورة، فيمكنك تعديل حجمه باستخدام CSS.

 < img src =" path/to/icon.svg " alt =" icon title " />

HTML مضمنة

يمكنك لصق محتوى ملف الرمز في كود HTML الخاص بك لعرضه على الصفحة.

 < a href ="" >
  < 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 >
  Click me
</ a >

بفضل ذلك، يمكنك تغيير الحجم واللون stroke-width الأيقونات باستخدام كود CSS.

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

كائن SVG

أضف أيقونة ليتم عرضها على صفحتك بالعلامة التالية (يمكن استبدال activity في المثال أعلاه بأي اسم رمز صالح):

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

رد فعل

مكونات React متاحة من خلال حزمة @tabler/icons-react .

 import { IconAward } from '@tabler/icons-react' ;

const MyComponent = ( ) => {
  return < IconAward
    size = { 36 } // set custom `width` and `height`
    color = "red" // set `stroke` color
    stroke = { 3 }  // set `stroke-width`
    strokeLinejoin = "miter" // override other SVG props
  / >
}

يقوم @tabler/icons-react بتصدير إعلانات النوع الخاصة به للاستخدام مع React وTypescript.

لمزيد من التفاصيل، راجع الوثائق.

فيو

مكونات Vue متاحة من خلال حزمة @tabler/icons-vue .

< template >
  <!-- basic usage -->
  < IconHome />

  <!-- set `stroke` color -->
  < IconHome color = " red " />
  < IconHome stroke = " red " />

  <!-- set custom `width` and `height` -->
  < IconHome size = " 36 " />

  <!-- set `stroke-width` -->
  < IconHome strokeWidth = " 2 " />
  < IconHome stroke-width = " 2 " />
</ template >

< script >
// Returns Vue component
import { IconHome } from ' @tabler/icons-vue ' ;

export default {
  components : { IconHome }
};
</ script >

أو باستخدام <script setup>

 < script setup >
// Import Vue component
import { IconHome } from ' @tabler/icons-vue ' ;
</ script >

< template >
  < IconHome color = " red " size = " 36 " strokeWidth = " 2 " />
</ template >

لمزيد من التفاصيل، راجع الوثائق.

الزاوي

المكونات الزاوية متاحة من خلال حزمة angular-tabler-icons . قم بتثبيت الحزمة، ثم قم بإنشاء وحدة الأيقونات:

 import { NgModule } from '@angular/core' ;

import { TablerIconsModule } from 'angular-tabler-icons' ;
import { IconCamera , IconHeart , IconBrandGithub } from 'angular-tabler-icons/icons' ;

// Select some icons (use an object, not an array)
const icons = {
  IconCamera ,
  IconHeart ,
  IconBrandGithub
} ;

@ NgModule ( {
  imports : [
    TablerIconsModule . pick ( icons )
  ] ,
  exports : [
    TablerIconsModule
  ]
} )
export class IconsModule { }

بعد استيراد IconsModule في الميزة أو الوحدة المشتركة، استخدم الرموز كما يلي:

 < i-tabler name =" camera " > </ i-tabler >
< i-tabler name =" heart " style =" color: red; " > </ i-tabler >
< i-tabler name =" brand-github " class =" someclass " > </ i-tabler >

تقوم angular-tabler-icons بتصدير إعلانات النوع الخاصة بها للاستخدام مع Typescript.

لمزيد من وثائق الاستخدام، راجع الوثائق الرسمية.

ممشوق

تتوفر مكونات Svelte من خلال حزمة @tabler/icons-svelte .

 < script lang = "ts" >
  import { IconHeart } from '@tabler/icons-svelte';
< / script >

< main >
  < IconHeart size = { 48 } stroke = { 1 } / >
  < IconHeart size = "32" stroke = "1.5" / >
  < IconHeart color = "crimson" class = "p-1" size = "96" stroke = "2" / >
< / main>

CDN

جميع الملفات المضمنة في حزمة @tabler/icons npm متاحة عبر CDN.

أيقونات التفاعل

 < script src =" https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons-react/dist/index.umd.min.js " > </ script >

خط أيقونة

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css " >

لتحميل إصدار محدد، استبدل latest برقم الإصدار المطلوب.

 < script src =" https://cdn.jsdelivr.net/npm/@tabler/[email protected]/icons-react/dist/index.umd.min.js " > </ script >

HTML

 < i class =" ti ti-brand-tabler " > </ i >

CSS

 content : 'ec8f' ;

تجميع الخطوط

لتجميع الخطوط، قم أولاً بتثبيت Fontforge.

عند تجميع الخط، سيبحث عن ملف json compile-options.json في المجلد الجذر (نفس المجلد مثل package.json ) في هذا الملف يمكنك تحديد خيارات إضافية:

الإعدادات الافتراضية إذا لم تقم بتعريف الملف ستكون:

{
  "includeIcons" : [],
  "fontForge" : " fontforge " ,
  "strokeWidth" : null
}

يجب أن يكون ملف Fontforge القابل للتنفيذ موجودًا في المسار أو يمكنك تعيين المسار إلى ملف Fontforge القابل للتنفيذ الذي تم تنزيله في ملف التكوين. إذا قمت بالتثبيت على جهاز Mac في دليل التطبيق الخاص بك، فسيكون /Applications/FontForge.app/Contents/MacOS/FontForge . يمكنك تعيين هذه القيمة في ملف compile-options.json .

{
  "fontForge" : " /Applications/FontForge.app/Contents/MacOS/FontForge "
}

لتجميع الخطوط قم بتشغيل:

npm run build-iconfont

بشكل افتراضي، يكون عرض الحد هو 2. يمكنك تغيير عرض الحد في ملف compile-options.json

{
  "strokeWidth" : 1.5 ,
}

لتقليل حجم ملف الخط، يمكنك اختيار تجميع مجموعة فرعية من الرموز. عندما تترك المصفوفة فارغة فسوف تقوم بتجميع كافة الخطوط. لتجميع رمزين فقط، يمكنك تعيين الخيار التالي على سبيل المثال في ملف compile-options.json :

{
  "includeIcons" : [ " alert-octagon " , " alert-triangle " ]
}

includeCategories الخاصية الاختيارية الفئات - مصفوفة أو سلسلة من فئات الأيقونات المراد تضمينها، وأسماء الفئات غير حساسة لحالة الأحرف.

{
  "includeCategories" : [ " Devices " , " System " ]
}

أو

{
  "includeCategories" : " Devices System "
}

الخاصية الاختيارية excludeIcons - مجموعة من أسماء الأيقونات تستخدم لاستبعاد بعض أيقونات الفئات:

{
  "includeCategories" : [ " system " ],
  "excludeIcons" : [ " adjustments " ]
}

الحل المعقد:

{
  "includeIcons" : [ " alert-octagon " , " alert-triangle " ],
  "includeCategories" : [ " devices " , " system " ],
  "excludeIcons" : [ " adjustments " ]
}

جيتباك يؤلف

بالنسبة لنظام التشغيل Android أو سطح المكتب، يمكنك استخدام compose-icons لاستخدام الرموز في مشاريعك. (انظر المستندات)

ضربات متعددة

تم إنشاء جميع الأيقونات الموجودة في هذا المستودع بقيمة خاصية stroke-width ، لذا إذا قمت بتغيير القيمة، يمكنك الحصول على أشكال مختلفة من الأيقونات التي تتلاءم بشكل جيد مع تصميمك.