Registry / web-framework / vue-tabler-icons

vue-tabler-icons

library2.21.0jsnpmunverified

`vue-tabler-icons` provides over 1250 pixel-perfect Tabler Icons as native Vue 3 components, with TypeScript definitions included. The current stable version is 2.21.0, and releases frequently synchronize with updates to the upstream `@tabler/icons` library, ensuring access to the latest icon sets. This library compiles all icons directly into JavaScript, eliminating the need for pre-processing steps. Key differentiators include direct Vue component usage, comprehensive TypeScript support, and straightforward customization options for size, color (via `currentColor`), and SVG attributes like `stroke-width`. It primarily supports Vue 3, while older Vue 2 applications can utilize the 1.x branch, though it receives delayed or discontinued updates.

web-framework

npm install vue-tabler-icons

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-TABLER-ICONS

vue-tabler-icons

web-frameworkjavascriptv2.21.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

BoldIcon

✓ import { BoldIcon } from 'vue-tabler-icons';

✗ import BoldIcon from 'vue-tabler-icons/BoldIcon'; // Incorrect path or default import for named export

Individual icons are named exports. Component names are PascalCase with 'Icon' suffix, e.g., `arrows-diagonal-2` becomes `ArrowsDiagonal2Icon`.

VueTablerIcons

✓ import VueTablerIcons from 'vue-tabler-icons'; // then Vue.use(VueTablerIcons);

✗ const VueTablerIcons = require('vue-tabler-icons'); // CommonJS syntax not recommended for Vue 3 ecosystem

This imports the Vue plugin for global registration of all icons, which is generally not recommended for tree-shaking.

TrashIcon

✓ import { TrashIcon } from 'vue-tabler-icons';

Named imports are preferred for optimal bundle size via tree-shaking.

Demonstrates importing and using individual Tabler icon components in a Vue 3 application, customizing their size, color, stroke width, and adding titles for accessibility.

import { createApp } from 'vue'; import { HomeIcon, SettingsIcon, UserIcon } from 'vue-tabler-icons'; const app = createApp({ components: { HomeIcon, SettingsIcon, UserIcon, }, template: ` <div id="app"> <h1>My Application</h1> <p>Welcome to the dashboard!</p> <home-icon size="32" style="color: #42b983;" /> <settings-icon size="24" stroke-width="1.5" /> <user-icon size="20" class="text-blue-500" /> <p>Hover for tooltips:</p> <home-icon size="24" title="Go to Home" /> <settings-icon size="24" title="Open Settings" /> </div> `, }); app.mount('#app');

Debug

Known issues

breakingVersion 2.x of `vue-tabler-icons` is exclusively for Vue 3 applications. If you are using Vue 2, you must install a 1.x version. The 1.x branch is no longer a priority and may receive delayed or discontinued updates.

fix

For Vue 2 projects, install `yarn add vue-tabler-icons@^1.0` or `npm i vue-tabler-icons@^1.0`. For Vue 3, ensure your project's Vue version is compatible with `vue-tabler-icons` v2.x.

affects: >=2.0.0

gotchaInstalling `vue-tabler-icons` as a global Vue plugin (`Vue.use(VueTablerIcons)`) is explicitly not recommended by the library maintainers because it prevents effective tree-shaking, leading to larger bundle sizes.

fix

Prefer importing individual icon components (e.g., `import { BoldIcon } from 'vue-tabler-icons';`) and registering them locally in your Vue components (`components: { BoldIcon }`). This allows bundlers to include only the icons actually used.

affects: >=1.0.0

gotchaIcon component names follow a specific PascalCase convention, appending 'Icon' to the end and replacing underscores before numbers. Some names also have explicit replacements (e.g., `2fa.svg` becomes `TwoFactorAuthIcon`). Incorrect names will result in component resolution errors.

fix

Consult the `vue-tabler-icons` documentation or the upstream Tabler Icons website for the exact PascalCase name of the icon you wish to use. For example, `arrows-diagonal-2` becomes `ArrowsDiagonal2Icon`.

affects: >=1.0.0

gotchaIcons use `currentColor` by default. To change an icon's color, apply CSS `color` property via `style` attribute or a CSS class. Direct `color` props might not function as expected if not explicitly handled by the component.

fix

Set the icon color using `style="color: yourColor"` or by applying a CSS class that defines the `color` property (e.g., `<bold-icon class="text-red" />`).

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: <SomeIconName>

The icon component was not correctly imported or registered in the Vue application or component.

fix

Ensure you have `import { SomeIconName } from 'vue-tabler-icons';` in your script and `components: { SomeIconName }` in your component options, or that you've correctly installed the global plugin (though not recommended).

Icons not visible or not rendering correctly (e.g., wrong size, unexpected alignment).

Incorrect sizing attributes or CSS conflicts. Upstream Tabler Icons updates might also occasionally affect sizing or positioning of SVG icons.

fix

Use the `size` prop (e.g., `<HomeIcon size="48" />`) or `height`/`width` attributes directly on the component. Check for conflicting global CSS styles that might override SVG properties.

TypeScript IntelliSense or type checking warns about unknown properties on icon components (e.g., `:key`, custom SVG attributes).

TypeScript might not fully infer all standard HTML/SVG attributes or Vue-specific properties on dynamically generated Vue components.

fix

While often ignorable if functionality is correct, ensure your TypeScript configuration is up-to-date. For custom SVG attributes like `stroke-width`, they are generally passed directly to the underlying SVG.

Upgrade

Version history

2.21.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue components. Version 3.x for `vue-tabler-icons` v2.x, and Vue 2.x for `vue-tabler-icons` v1.x.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/alex-oleshkevich/vue-tabler-icons ↗

packagehttps://www.npmjs.com/package/vue-tabler-icons ↗