Tabler-icons

一组 2853 个免费的 MIT 许可的高质量 SVG 图标，供您在 Web 项目中使用。每个图标都设计在 24x24 网格和 2px 笔划上。

浏览 tabler-icons.io →

赞助商

如果你想支持我的项目并帮助我发展它，你可以成为 GitHub 上的赞助商或者只是在 PayPal 上捐款:)

预览

赞助商

安装

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: 32px;
  height: 32px;
  stroke-width: 1.25;
}

SVG sprite

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

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

React

导入图标并将其呈现在您的组件中。你可以通过 React props 调整 SVG 属性：

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

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 和 Typescript。

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';

// 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 使用。

更多使用文档参考官方文档。

Vue

Vue 组件可通过vue-tabler-icons包获得。安装包，导入图标组件并在你的组件中渲染它。您可以通过传递常规 HTML 属性来调整 SVG 属性：

<script>
    // MyComponent.vue
    import { BoldIcon } from 'vue-tabler-icons';

    export default {
        components: { BoldIcon },
    };
</script>

<template>
    <bold-icon />
</template>

vue-tabler-icons导出它自己的类型声明以供 Typescript 使用。

更多使用文档参考官方文档。

内容分发网络

npm 包中包含的所有文件 @tabler/icons都可以通过 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@latest/iconfont/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。

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

Svelte

您可以tabler-icons-svelte在 Svelte 项目中使用图标（参见示例）：

<script>
    import { CurrencyBitcoin, BrandGithub, CircleX } from "tabler-icons-svelte";
</script>

<CurrencyBitcoin />
<BrandGithub size="48" strokeWidth="1" />
<CircleX />

喷气背包组成

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

多笔画

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

执照

Tabler Icons 在MIT License下获得许可。