Tabler 图标

<img src="https://yellow-cdn.veclightyear.com/87312a0a/c2bd5c87-6e7f-4daf-8f62-7c959ae87d19.png" alt="Tabler 图标" width="838"> 一套包含 5467 个免费的 MIT 许可高质量 SVG 图标，供您在网页项目中使用。每个图标都设计在 24x24 的网格上，采用 2px 的笔画宽度。 <a href="https://tabler-icons.io/">在 tabler-icons.io 上浏览 →</a>

赞助商

如果您想支持我的项目并帮助它成长，您可以在 GitHub 上成为赞助商或直接在 PayPal 上捐赠 :)

预览

轮廓版本（4761 个图标）

填充版本（706 个图标）

安装

npm install @tabler/icons --save

或者直接从 GitHub 下载。

使用方法

所有图标都是用 SVG 构建的，因此您可以将它们作为 <img>、background-image 使用，或直接内联在 HTML 代码中。

HTML 图像

如果您将图标作为图像加载，可以使用 CSS 修改其大小。

<img src="https://raw.githubusercontent.com/tabler/tabler-icons/main/path/to/icon.svg" alt="图标标题" />

内联 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>
  点击我
</a>

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

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

SVG 精灵

使用以下标记在页面上显示图标（上面示例中的 activity 可以替换为任何有效的图标名称）：

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

React

React 组件可通过 @tabler/icons-react 包使用。

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

const MyComponent = () => {
  return <IconAward
    size={36} // 设置自定义 `width` 和 `height`
    color="red" // 设置 `stroke` 颜色
    stroke={3}  // 设置 `stroke-width`
    strokeLinejoin="miter" // 覆盖其他 SVG 属性
  />
}

@tabler/icons-react 为 React 和 Typescript 使用导出自己的类型声明。

更多详情，请参阅文档。

Vue

Vue 组件可通过 @tabler/icons-vue 包使用。

<template>
  <!-- 基本用法 -->
  <IconHome />

  <!-- 设置 `stroke` 颜色 -->
  <IconHome color="red"/>
  <IconHome stroke="red"/>

  <!-- 设置自定义 `width` 和 `height` -->
  <IconHome size="36"/>

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

<script>
// 返回 Vue 组件
import { IconHome } from '@tabler/icons-vue';

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

或者使用 <script setup>

<script setup>
// 导入 Vue 组件
import { IconHome } from '@tabler/icons-vue';
</script>

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

更多详情，请参阅文档。

Angular

Angular 组件可通过 angular-tabler-icons 包使用。安装包后，创建图标模块：

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

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

// 选择一些图标（使用对象，而不是数组）
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

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 获取。

React 图标

<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/icons@1.74.0/icons-react/dist/index.umd.min.js"></script>

HTML

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

CSS

content: 'ec8f';

编译字体

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

编译字体时，它会在根文件夹（与 package.json 相同的文件夹）中寻找一个名为 compile-options.json 的 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 Compose

对于 Android 或桌面，您可以使用 compose-icons 在项目中使用图标。（请参阅文档）

多种笔画

此存储库中的所有图标都是使用 stroke-width 属性的值创建的，因此如果您更改该值，可以获得不同的图标变体，这些变体将很好地适合您的设计。

许可证

Tabler Icons 根据 MIT 许可证授权。

赞助 Tabler

tabler-icons

Tabler 图标

赞助商

预览

轮廓版本（4761 个图标）

填充版本（706 个图标）

安装

使用方法

HTML 图像

内联 HTML

SVG 精灵

React

Vue

Angular

Svelte

CDN

React 图标

图标字体

HTML

CSS

编译字体

Jetpack Compose

多种笔画

许可证

赞助 Tabler

编辑推荐精选

Trae

问小白

Transly

讯飞智文

讯飞星火

Spark-TTS

咔片PPT

讯飞绘文

材料星

openai-agents-python

探索AI的无限可能

推荐工具精选

Trae

豆包

讯飞文书

讯飞绘文

讯飞绘镜

阿里绘蛙

咔片PPT

AI云服务特惠

火山引擎

阿里云

腾讯云

华为云

百度智能云

AWS

关注微信公众号