tabler icons

ไอคอนตาราง

ชุดไอคอน SVG คุณภาพสูงที่ได้รับอนุญาตจาก MIT ฟรี 5,718 ชุดเพื่อให้คุณใช้ในโครงการเว็บของคุณ แต่ละไอคอนได้รับการออกแบบบนตารางขนาด 24x24 และเส้นขีดขนาด 2px

เรียกดูได้ที่ 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 >

ตอบสนอง

ทำปฏิกิริยาส่วนประกอบที่มีให้ผ่านแพ็คเกจ @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>

ซีดีเอ็น

ไฟล์ทั้งหมดที่รวมอยู่ในแพ็คเกจ @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 > 

ซีเอสเอส

 content : 'ec8f' ;

การรวบรวมแบบอักษร

หากต้องการคอมไพล์ฟอนต์ก่อนอื่นให้ติดตั้งฟอนต์ฟอร์จ

เมื่อคอมไพล์ฟอนต์ มันจะมองหาไฟล์ 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 " ]
}

Jetpack เขียน

สำหรับ Android หรือเดสก์ท็อป คุณสามารถใช้ compose-icons เพื่อใช้ไอคอนในโครงการของคุณได้ (ดูเอกสาร)

หลายจังหวะ

ไอคอนทั้งหมดในที่เก็บนี้ถูกสร้างขึ้นด้วยค่าของคุณสมบัติ stroke-width ดังนั้น หากคุณเปลี่ยนค่า คุณจะได้รับไอคอนรูปแบบต่างๆ ที่จะเข้ากับการออกแบบของคุณได้ดี

ใบอนุญาต

ไอคอน Tabler ได้รับอนุญาตภายใต้ใบอนุญาต MIT

สปอนเซอร์ เทเบิล