tabler icons
Release 3.22.0
Satu set 5718 ikon SVG berkualitas tinggi berlisensi MIT gratis untuk Anda gunakan dalam proyek web Anda. Setiap ikon dirancang pada kisi 24x24 dan goresan 2 piksel.
Jelajahi di tabler-icons.io →
Jika Anda ingin mendukung proyek saya dan membantu saya mengembangkannya, Anda dapat menjadi sponsor di GitHub atau cukup berdonasi di PayPal :)
npm install @tabler/icons --save
atau cukup unduh dari GitHub.
Semua ikon dibuat dengan SVG, sehingga Anda dapat menempatkannya sebagai <img> , background-image , dan sebaris dalam kode HTML.
Jika Anda memuat ikon sebagai gambar, Anda dapat mengubah ukurannya menggunakan CSS.
< img src =" path/to/icon.svg " alt =" icon title " />Anda dapat menempelkan konten file ikon ke dalam kode HTML Anda untuk menampilkannya di halaman.
< 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 > Berkat itu, Anda dapat mengubah ukuran, warna, dan stroke-width ikon dengan kode CSS.
. icon-tabler {
color : red;
width : 32 px ;
height : 32 px ;
stroke-width : 1.25 ;
} Tambahkan ikon untuk ditampilkan di halaman Anda dengan markup berikut ( activity dalam contoh di atas dapat diganti dengan nama ikon apa pun yang valid):
< svg width =" 24 " height =" 24 " >
< use xlink:href =" path/to/tabler-sprite.svg#tabler-activity " />
</ svg > Komponen React tersedia melalui paket @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 mengekspor deklarasi tipenya sendiri untuk digunakan dengan React dan TypeScript.
Untuk lebih jelasnya, lihat dokumentasi.
Komponen Vue tersedia melalui paket @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 > atau dengan <script setup>
< script setup >
// Import Vue component
import { IconHome } from ' @tabler/icons-vue ' ;
</ script >
< template >
< IconHome color = " red " size = " 36 " strokeWidth = " 2 " />
</ template >Untuk lebih jelasnya, lihat dokumentasi.
Komponen sudut tersedia melalui paket angular-tabler-icons . Instal paketnya, lalu buat modul ikon:
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 { }Setelah mengimpor IconsModule ke fitur atau modul bersama Anda, gunakan ikon sebagai berikut:
< 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 mengekspor deklarasi tipenya sendiri untuk digunakan dengan TypeScript.
Untuk dokumentasi penggunaan lebih lanjut, lihat dokumentasi resmi.
Komponen langsing tersedia melalui paket @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> Semua file yang disertakan dalam paket @tabler/icons npm tersedia melalui 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 " > Untuk memuat versi tertentu, ganti latest dengan nomor versi yang diinginkan.
< script src =" https://cdn.jsdelivr.net/npm/@tabler/[email protected]/icons-react/dist/index.umd.min.js " > </ script > < i class =" ti ti-brand-tabler " > </ i > content : 'ec8f' ;Untuk mengkompilasi font, instal fontforge terlebih dahulu.
Saat mengkompilasi font, ia akan mencari file json compile-options.json di folder root (folder yang sama dengan package.json ). Dalam file ini Anda dapat menentukan opsi tambahan:
Pengaturan default jika Anda belum menentukan file adalah:
{
"includeIcons" : [],
"fontForge" : " fontforge " ,
"strokeWidth" : null
} Eksekusi fontforge harus ada di jalurnya atau Anda dapat mengatur jalur ke fontforge yang dapat dieksekusi yang diunduh di file konfigurasi. Jika Anda menginstal pada Mac di direktori aplikasi Anda, itu akan menjadi /Applications/FontForge.app/Contents/MacOS/FontForge . Anda dapat mengatur nilai ini di file compile-options.json .
{
"fontForge" : " /Applications/FontForge.app/Contents/MacOS/FontForge "
}Untuk mengkompilasi font, jalankan:
npm run build-iconfont Secara default, lebar guratan adalah 2. Anda dapat mengubah lebar guratan di compile-options.json
{
"strokeWidth" : 1.5 ,
} Untuk mengurangi ukuran file font Anda dapat memilih untuk mengkompilasi subset ikon. Ketika Anda membiarkan array kosong, semua font akan dikompilasi. Untuk mengkompilasi hanya dua ikon, Anda dapat mengatur misalnya opsi berikut di compile-options.json :
{
"includeIcons" : [ " alert-octagon " , " alert-triangle " ]
} Properti opsional includeCategories - array atau string kategori ikon yang akan disertakan, nama kategori tidak peka huruf besar-kecil.
{
"includeCategories" : [ " Devices " , " System " ]
}atau
{
"includeCategories" : " Devices System "
} Properti opsional excludeIcons - serangkaian nama ikon yang digunakan untuk mengecualikan beberapa ikon kategori:
{
"includeCategories" : [ " system " ],
"excludeIcons" : [ " adjustments " ]
}Solusi kompleks:
{
"includeIcons" : [ " alert-octagon " , " alert-triangle " ],
"includeCategories" : [ " devices " , " system " ],
"excludeIcons" : [ " adjustments " ]
} Untuk Android atau Desktop Anda dapat menggunakan compose-icons untuk menggunakan ikon dalam proyek Anda. (lihat dokumen)
Semua ikon dalam repositori ini telah dibuat dengan nilai properti stroke-width , jadi jika Anda mengubah nilainya, Anda bisa mendapatkan varian ikon berbeda yang sesuai dengan desain Anda.
Ikon Tabler dilisensikan di bawah Lisensi MIT.
