npmpackage.info

vue-tabler-icons

Fully customizable free SVG icons made as Vue components.

2.21.0

150

MIT

JavaScript

340.09 kB

551,442 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

Published on 26 May 2023

v2.20.0

Published on 23 Feb 2023

v2.19.1

Published on 17 Feb 2023

v2.19.0

Published on 01 Feb 2023

v2.18.0

Published on 20 Jan 2023

v2.17.0

Published on 09 Dec 2022

View all 35 releases

Contributors

Unable to fetch Contributors

View all 6 contributors

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

551,442

Last Day

1,239

Last Week

4,759

Last Month

19,799

Last Year

272,142

GitHub Statistics

150 Stars

125 Commits

12 Forks

3 Watching

3 Branches

6 Contributors

Bundle Size

4.64 MB

Minified

340.09 kB

Minified + Gzipped

Bundlephobia

Maintainers

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

Publised On

26 May 2023

Total Downloads

Cumulative downloads

Total Downloads

551,442

Last day

14.6%

1,239

Compared to previous day

Last week

-11.4%

4,759

Compared to previous week

Last month

9.8%

19,799

Compared to previous month

Last year

49.9%

272,142

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

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

Versions

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

Dangerous-Workflow

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

10

Binary-Artifacts

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

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

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

CII-Best-Practices

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

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-02-03

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

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.29.0

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

@iconify-prerendered/vue-tabler

0.28.1737616492

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

@kalimahapps/vue-icons

1.7.1

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