Tabler 图标
一套包含 5467 个免费的 MIT 许可高质量 SVG 图标,供您在网页项目中使用。每个图标都设计在 24x24 的网格上,采用 2px 的笔画宽度。
赞助商
如果您想支持我的项目并帮助它成长,您可以在 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 许可证 授权。