Tabler 图标

Tabler 图标提供了一系列可定制和可缩放的图标，是创建现代且引人入胜界面的强大工具。

安装

所有的图标都是包含 SVG 元素的 Vue 组件。

这意味着你可以按需导入单个图标，利用 Tree-shaking 机制，只打包你实际使用的图标，从而减小应用体积。

你可以使用你喜欢的包管理器进行安装：

NPM

npm install @tabler/icons-vue

Yarn

yarn install @tabler/icons-vue

PNPM

pnpm install @tabler/icons-vue

Bun

bun install @tabler/icons-vue

或者直接从 GitHub 中下载。

如何使用

你可以像导入普通 Vue 组件一样导入图标并使用。

查看代码

<script setup>
    // 导入图标
    import { IconHome, IconSettingsFilled } from '@tabler/icons-vue';
</script>

<template>
    <IconHome />
    <IconSettingsFilled />
</template>

您可以传递额外的属性来调整图标。

<IconHome color="red" :size="48" stroke-width="1"/>

可用 Props 属性表

属性名 (name)	类型 (type)	默认值 (default)	说明
size	数字 (Number)	24	图标的尺寸（宽高）
color	字符串 (String)	currentColor	图标的颜色
stroke	数字 (Number)	2	图标的描边粗细