{"id":12593,"library":"vue-tabler-icons","title":"Vue Tabler Icons","description":"`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.","status":"active","version":"2.21.0","language":"javascript","source_language":"en","source_url":"https://github.com/alex-oleshkevich/vue-tabler-icons","tags":["javascript","typescript"],"install":[{"cmd":"npm install vue-tabler-icons","lang":"bash","label":"npm"},{"cmd":"yarn add vue-tabler-icons","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-tabler-icons","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue components. Version 3.x for `vue-tabler-icons` v2.x, and Vue 2.x for `vue-tabler-icons` v1.x.","package":"vue","optional":false}],"imports":[{"note":"Individual icons are named exports. Component names are PascalCase with 'Icon' suffix, e.g., `arrows-diagonal-2` becomes `ArrowsDiagonal2Icon`.","wrong":"import BoldIcon from 'vue-tabler-icons/BoldIcon'; // Incorrect path or default import for named export","symbol":"BoldIcon","correct":"import { BoldIcon } from 'vue-tabler-icons';"},{"note":"This imports the Vue plugin for global registration of all icons, which is generally not recommended for tree-shaking.","wrong":"const VueTablerIcons = require('vue-tabler-icons'); // CommonJS syntax not recommended for Vue 3 ecosystem","symbol":"VueTablerIcons","correct":"import VueTablerIcons from 'vue-tabler-icons';\n// then Vue.use(VueTablerIcons);"},{"note":"Named imports are preferred for optimal bundle size via tree-shaking.","symbol":"TrashIcon","correct":"import { TrashIcon } from 'vue-tabler-icons';"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport { HomeIcon, SettingsIcon, UserIcon } from 'vue-tabler-icons';\n\nconst app = createApp({\n components: {\n HomeIcon,\n SettingsIcon,\n UserIcon,\n },\n template: `\n
\n

My Application

\n

Welcome to the dashboard!

\n \n \n \n

Hover for tooltips:

\n \n \n
\n `,\n});\n\napp.mount('#app');","lang":"typescript","description":"Demonstrates importing and using individual Tabler icon components in a Vue 3 application, customizing their size, color, stroke width, and adding titles for accessibility."},"warnings":[{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"Installing `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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`.","message":"Icon 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set the icon color using `style=\"color: yourColor\"` or by applying a CSS class that defines the `color` property (e.g., ``).","message":"Icons 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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).","cause":"The icon component was not correctly imported or registered in the Vue application or component.","error":"[Vue warn]: Failed to resolve component: "},{"fix":"Use the `size` prop (e.g., ``) or `height`/`width` attributes directly on the component. Check for conflicting global CSS styles that might override SVG properties.","cause":"Incorrect sizing attributes or CSS conflicts. Upstream Tabler Icons updates might also occasionally affect sizing or positioning of SVG icons.","error":"Icons not visible or not rendering correctly (e.g., wrong size, unexpected alignment)."},{"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.","cause":"TypeScript might not fully infer all standard HTML/SVG attributes or Vue-specific properties on dynamically generated Vue components.","error":"TypeScript IntelliSense or type checking warns about unknown properties on icon components (e.g., `:key`, custom SVG attributes)."}],"ecosystem":"npm"}