tabler icons下载 - tabler icons源码下载

tabler icons

其他源码

Release 3.22.0

下载

表图标

一组 5718 个免费的 MIT 许可的高质量 SVG 图标，供您在 Web 项目中使用。每个图标都设计在 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 >

因此，您可以使用 CSS 代码更改图标的大小、颜色和stroke-width 。

. 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 组件可通过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 >

超文本标记语言

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

CSS

 content : 'ec8f' ;

编译字体

要编译字体，首先安装 fontforge。

编译字体时，它将在根文件夹（与package.json相同的文件夹）中查找 json 文件compile-options.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 " ]
}