npmpackage.info

Gathering detailed insights and metrics for vue-tabler-icons

Other packages similar to vue-tabler-icons

@vicons/tabler

0.13.0

Vue3 SVG icon components integrated from [`tabler`](https://github.com/tabler/tabler-icons)

@tabler/icons-vue

3.34.0

A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.

@kalimahapps/vue-icons

1.8.1

70,000+ SVG icons of popular icon sets that you can add seamlessly to vue projects

@iconify-prerendered/vue-tabler

0.28.1749100890

Tabler Icons components for Vue. Designed for ease of use and high performance

Gathering detailed insights and metrics for vue-tabler-icons

vue-tabler-icons - 2.21.0 | npmpackage.info

vue-tabler-icons

Fully customizable free SVG icons made as Vue components.

2.21.0

151

MIT

JavaScript

37.01 MB

2.6

Installations

npm install vue-tabler-icons

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

14.21.3

NPM Version

6.14.18 Pull Requests

Open

1

Total

19

Closed

4

Merged

14

Issues

Open

3

Total

25

Closed

22

Releases

v2.21.0

Updated on May 26, 2023

v2.20.0

Updated on Feb 23, 2023

v2.19.1

Updated on Feb 17, 2023

v2.19.0

Updated on Feb 01, 2023

v2.18.0

Updated on Jan 20, 2023

v2.17.0

Updated on Dec 09, 2022

View All 35 releases

Languages

JavaScript

Vue

Shell

HTML

TypeScript

JavaScript (41.81%)

Vue (40.04%)

Shell (11.18%)

HTML (3.79%)

TypeScript (3.18%)

Developer

alex-oleshkevich

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

151 Stars

125 Commits

13 Forks

2 Watchers

3 Branches

6 Contributors

Updated on Jun 04, 2025

Maintainers

View All 6 Contributors

Package Meta Information

Latest Version

2.21.0

Package Id

vue-tabler-icons@2.21.0

Unpacked Size

37.01 MB

Size

2.29 MB

File Count

4,223

NPM Version

6.14.18

Node Version

14.21.3

Published on

May 26, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@babel/cli @babel/core @tabler/icons @vue/babel-plugin-jsx bili fs-extra pascal-case vue

Tabler Icons as Vue 3 components

NPM GitHub Workflow Status GitHub NPM - Downloads

Preview

Live preview tool

Preview icons

Tabler Icons

</p>

Features

Over 1250 pixel-perfect icons
TypeScript definitions
Vue 3 support
Vue 2 support (see v1.x)
All icons are compiled to JS, no preprocessing required

Installation

Installation for Vue 3

1yarn add vue-tabler-icons
2
3# or
4
5npm i vue-tabler-icons

Installation for Vue 2

Version 2.x is Vue 3 only, if you use Vue 2 then install any 1.x version

1yarn add vue-tabler-icons@^1.0

v1.x is no longer a priority so updates may be delayed or discontinued.

Usage

1<script>
2    // MyComponent.vue
3    import { BoldIcon } from "vue-tabler-icons";
4
5    export default {
6        components: { BoldIcon },
7    };
8</script>
9
10<template>
11    <bold-icon />
12</template>

Using Vue plugin

You may install a Vue plugin that automatically adds all components to the Vue instance.

Note: this usage is not recommended as it cannot be tree-shaken.

1import Vue from "vue";
2import VueTablerIcons from "vue-tabler-icons";
3
4Vue.use(VueTablerIcons);

Now you can use icons without importing them:

1<template>
2    <trash-icon />
3</template>

Using CDN

If you prefer CDN, then use this URL https://unpkg.com/vue-tabler-icons/dist/vue-tabler-icons.umd.js
The library doesn't automatically registers itself so you need to do it manually:

1<script>
2    Vue.use(VueTablerIcons);
3</script>

Naming pattern

Component names use the same names as defined in the original library with some rules applied:

they are in PascalCase
underscores before numbers are removed
Icon added to the end of the name

For example:

arrows-diagonal-2 will become ArrowsDiagonal2Icon.

Replacements

Following icon names are replaced to match JavaScript variable name pattern:

Original	New
2fa.svg	TwoFactorAuthIcon
3d-cube-sphere.svg	ThreedCubeSphereIcon
3d-cube-sphere-off.svg	ThreedCubeSphereIconOff
3d-rotate.svg	ThreedRotateIcon
123.svg	OneTwoThreeRotateIcon
360-view.svg	Deg360ViewIcon
360.svg	Deg360Icon

Icon size

All components define size property that you can use to control the icon's size:

1<bold-icon size="48" />

Will render 48x48 icon.

All other attributes are directly bound to the underlying SVG image.

Attributes height and width have higher precedence over size property.

Icon color

All icons use currentColor as their color. You can colorize your icons as you do that for text.

1<bold-icon style="color: red" /> <bold-icon class="text-red" />

Stroke width and other SVG attributes

Any custom attribute that set on the component will be applied directly to the SVG asset. For example, if you want to set stroke-width attribute just set it as usually:

1<bold-icon stroke-width="1" />

Building locally

Clone repo:

1git clone https://github.com/alex-oleshkevich/vue-feather-icons.git

Install deps:

1yarn install

Run build

1yarn build

Icon component will be in icons directory.

Credits

Tabler Icons for icon pack

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.6

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More