@tabler/core 1.1.1 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/css/tabler-flags.css +2 -2
- package/dist/css/tabler-flags.css.map +1 -1
- package/dist/css/tabler-flags.min.css +2 -2
- package/dist/css/tabler-flags.min.css.map +1 -1
- package/dist/css/tabler-flags.rtl.css +2 -2
- package/dist/css/tabler-flags.rtl.css.map +1 -1
- package/dist/css/tabler-flags.rtl.min.css +2 -2
- package/dist/css/tabler-flags.rtl.min.css.map +1 -1
- package/dist/css/tabler-marketing.css +6 -6
- package/dist/css/tabler-marketing.css.map +1 -1
- package/dist/css/tabler-marketing.min.css +2 -2
- package/dist/css/tabler-marketing.min.css.map +1 -1
- package/dist/css/tabler-marketing.rtl.css +6 -6
- package/dist/css/tabler-marketing.rtl.css.map +1 -1
- package/dist/css/tabler-marketing.rtl.min.css +2 -2
- package/dist/css/tabler-marketing.rtl.min.css.map +1 -1
- package/dist/css/tabler-payments.css +1 -1
- package/dist/css/tabler-payments.min.css +1 -1
- package/dist/css/tabler-payments.rtl.css +1 -1
- package/dist/css/tabler-payments.rtl.min.css +1 -1
- package/dist/css/tabler-props.css +448 -0
- package/dist/css/tabler-props.css.map +1 -0
- package/dist/css/tabler-props.min.css +8 -0
- package/dist/css/tabler-props.min.css.map +1 -0
- package/dist/css/tabler-props.rtl.css +447 -0
- package/dist/css/tabler-props.rtl.css.map +1 -0
- package/dist/css/tabler-props.rtl.min.css +8 -0
- package/dist/css/tabler-props.rtl.min.css.map +1 -0
- package/dist/css/tabler-socials.css +1 -1
- package/dist/css/tabler-socials.min.css +1 -1
- package/dist/css/tabler-socials.rtl.css +1 -1
- package/dist/css/tabler-socials.rtl.min.css +1 -1
- package/dist/css/tabler-themes.css +213 -0
- package/dist/css/tabler-themes.css.map +1 -0
- package/dist/css/tabler-themes.min.css +8 -0
- package/dist/css/tabler-themes.min.css.map +1 -0
- package/dist/css/tabler-themes.rtl.css +212 -0
- package/dist/css/tabler-themes.rtl.css.map +1 -0
- package/dist/css/tabler-themes.rtl.min.css +8 -0
- package/dist/css/tabler-themes.rtl.min.css.map +1 -0
- package/dist/css/tabler-vendors.css +31 -16
- package/dist/css/tabler-vendors.css.map +1 -1
- package/dist/css/tabler-vendors.min.css +2 -2
- package/dist/css/tabler-vendors.min.css.map +1 -1
- package/dist/css/tabler-vendors.rtl.css +31 -16
- package/dist/css/tabler-vendors.rtl.css.map +1 -1
- package/dist/css/tabler-vendors.rtl.min.css +2 -2
- package/dist/css/tabler-vendors.rtl.min.css.map +1 -1
- package/dist/css/tabler.css +7662 -8392
- package/dist/css/tabler.css.map +1 -1
- package/dist/css/tabler.min.css +2 -2
- package/dist/css/tabler.min.css.map +1 -1
- package/dist/css/tabler.rtl.css +7751 -8481
- package/dist/css/tabler.rtl.css.map +1 -1
- package/dist/css/tabler.rtl.min.css +2 -2
- package/dist/css/tabler.rtl.min.css.map +1 -1
- package/dist/img/flags/kr.svg +1 -1
- package/dist/js/tabler-theme.esm.js +38 -0
- package/dist/js/tabler-theme.esm.js.map +1 -0
- package/dist/js/tabler-theme.esm.min.js +8 -0
- package/dist/js/tabler-theme.esm.min.js.map +1 -0
- package/dist/js/tabler-theme.js +45 -0
- package/dist/js/tabler-theme.js.map +1 -0
- package/dist/js/tabler-theme.min.js +8 -0
- package/dist/js/tabler-theme.min.js.map +1 -0
- package/dist/js/tabler.esm.js +28 -21
- package/dist/js/tabler.esm.js.map +1 -1
- package/dist/js/tabler.esm.min.js +5 -5
- package/dist/js/tabler.esm.min.js.map +1 -1
- package/dist/js/tabler.js +36 -24
- package/dist/js/tabler.js.map +1 -1
- package/dist/js/tabler.min.js +5 -5
- package/dist/js/tabler.min.js.map +1 -1
- package/js/src/autosize.js +1 -4
- package/js/src/input-mask.js +1 -3
- package/js/tabler-theme.js +35 -0
- package/js/{tabler.esm.js → tabler.js} +16 -0
- package/package.json +10 -8
- package/scss/_bootstrap-components.scss +0 -5
- package/scss/_core.scss +4 -0
- package/scss/_props.scss +91 -0
- package/scss/_utilities.scss +30 -1
- package/scss/_variables-dark.scss +1 -1
- package/scss/_variables.scss +79 -60
- package/scss/helpers/_index.scss +143 -0
- package/scss/layout/_core.scss +1 -0
- package/scss/layout/_dark.scss +33 -38
- package/scss/layout/_navbar.scss +2 -1
- package/scss/layout/_page.scss +1 -0
- package/scss/layout/_root.scss +26 -34
- package/scss/marketing/_core.scss +1 -1
- package/scss/marketing/_pricing.scss +1 -1
- package/scss/mixins/_mixins.scss +6 -6
- package/scss/tabler-props.scss +1 -0
- package/scss/tabler-themes.scss +121 -0
- package/scss/tabler-vendors.scss +3 -1
- package/scss/tabler.scss +0 -1
- package/scss/ui/_accordion.scss +31 -26
- package/scss/ui/_alerts.scss +19 -8
- package/scss/ui/_avatars.scss +35 -9
- package/scss/ui/_badges.scss +1 -1
- package/scss/ui/_buttons.scss +15 -17
- package/scss/ui/_close.scss +55 -2
- package/scss/ui/_dropdowns.scss +1 -0
- package/scss/ui/_forms.scss +12 -2
- package/scss/ui/_markdown.scss +10 -1
- package/scss/ui/_nav.scss +11 -1
- package/scss/ui/_offcanvas.scss +1 -1
- package/scss/ui/_pagination.scss +2 -0
- package/scss/ui/_signature.scss +4 -2
- package/scss/ui/_steps.scss +4 -0
- package/scss/ui/_tables.scss +16 -0
- package/scss/ui/_tags.scss +1 -1
- package/scss/ui/_type.scss +69 -7
- package/scss/ui/forms/_form-colorinput.scss +1 -1
- package/scss/ui/forms/_form-imagecheck.scss +6 -5
- package/scss/ui/forms/_form-selectgroup.scss +1 -1
- package/scss/utils/_colors.scss +58 -11
- package/scss/utils/_scroll.scss +0 -2
- package/scss/vendor/_coloris.scss +6 -1
- package/scss/vendor/_fslightbox.scss +1 -1
- package/scss/vendor/_jsvectormap.scss +2 -3
- package/scss/vendor/_litepicker.scss +1 -0
- package/scss/vendor/_nouislider.scss +0 -2
- package/scss/vendor/_tinymce.scss +3 -3
- package/scss/vendor/_tom-select.scss +7 -4
- package/scss/vendor/_turbo.scss +3 -0
- package/scss/vendor/_wysiwyg.scss +34 -0
- package/docs/emails/index.mdx +0 -14
- package/docs/emails/introduction/compiled-html.mdx +0 -29
- package/docs/emails/introduction/contents.mdx +0 -63
- package/docs/emails/introduction/index.mdx +0 -9
- package/docs/emails/introduction/source-html.mdx +0 -26
- package/docs/icons/index.mdx +0 -13
- package/docs/icons/libraries/index.mdx +0 -5
- package/docs/icons/libraries/preact.mdx +0 -42
- package/docs/icons/libraries/react.mdx +0 -42
- package/docs/icons/libraries/solidjs.mdx +0 -42
- package/docs/icons/libraries/svelte.mdx +0 -43
- package/docs/icons/libraries/vue.mdx +0 -50
- package/docs/icons/libraries/webfont.mdx +0 -60
- package/docs/icons/plugins/figma.mdx +0 -15
- package/docs/icons/plugins/index.mdx +0 -4
- package/docs/icons/static-files/eps.mdx +0 -15
- package/docs/icons/static-files/index.mdx +0 -5
- package/docs/icons/static-files/pdf.mdx +0 -15
- package/docs/icons/static-files/png.mdx +0 -31
- package/docs/icons/static-files/svg.mdx +0 -85
- package/docs/illustrations/index.mdx +0 -8
- package/docs/illustrations/introduction/contents.mdx +0 -77
- package/docs/illustrations/introduction/customization.mdx +0 -1198
- package/docs/illustrations/introduction/index.mdx +0 -5
- package/docs/illustrations/introduction/license.mdx +0 -90
- package/docs/img/browsers/brave.svg +0 -1
- package/docs/img/browsers/chrome.svg +0 -1
- package/docs/img/browsers/edge.svg +0 -1
- package/docs/img/browsers/electron.svg +0 -1
- package/docs/img/browsers/firefox.svg +0 -1
- package/docs/img/browsers/internet-explorer.svg +0 -1
- package/docs/img/browsers/opera.svg +0 -1
- package/docs/img/browsers/safari.svg +0 -1
- package/docs/img/browsers/vivaldi.svg +0 -1
- package/docs/img/cover-illustrations-dark.png +0 -0
- package/docs/img/cover-illustrations.png +0 -0
- package/docs/img/cover-tabler-dark.png +0 -0
- package/docs/img/cover-tabler.png +0 -0
- package/docs/img/icons/figma-plugin.png +0 -0
- package/docs/img/icons/package-angular-dark.png +0 -0
- package/docs/img/icons/package-angular.png +0 -0
- package/docs/img/icons/package-eps-dark.png +0 -0
- package/docs/img/icons/package-eps.png +0 -0
- package/docs/img/icons/package-js-dark.png +0 -0
- package/docs/img/icons/package-js.png +0 -0
- package/docs/img/icons/package-pdf-dark.png +0 -0
- package/docs/img/icons/package-pdf.png +0 -0
- package/docs/img/icons/package-png-dark.png +0 -0
- package/docs/img/icons/package-png.png +0 -0
- package/docs/img/icons/package-preact-dark.png +0 -0
- package/docs/img/icons/package-preact.png +0 -0
- package/docs/img/icons/package-react-dark.png +0 -0
- package/docs/img/icons/package-react-native-dark.png +0 -0
- package/docs/img/icons/package-react-native.png +0 -0
- package/docs/img/icons/package-react.png +0 -0
- package/docs/img/icons/package-solidjs-dark.png +0 -0
- package/docs/img/icons/package-solidjs.png +0 -0
- package/docs/img/icons/package-sprite-dark.png +0 -0
- package/docs/img/icons/package-sprite.png +0 -0
- package/docs/img/icons/package-svelte-dark.png +0 -0
- package/docs/img/icons/package-svelte.png +0 -0
- package/docs/img/icons/package-svg-dark.png +0 -0
- package/docs/img/icons/package-svg.png +0 -0
- package/docs/img/icons/package-vue-dark.png +0 -0
- package/docs/img/icons/package-vue.png +0 -0
- package/docs/img/icons/package-webfont-dark.png +0 -0
- package/docs/img/icons/package-webfont.png +0 -0
- package/docs/index.mdx +0 -16
- package/docs/ui/base/colors.mdx +0 -83
- package/docs/ui/base/index.mdx +0 -6
- package/docs/ui/base/typography.mdx +0 -311
- package/docs/ui/components/alerts.mdx +0 -406
- package/docs/ui/components/autosize.mdx +0 -25
- package/docs/ui/components/avatars.mdx +0 -227
- package/docs/ui/components/badges.mdx +0 -112
- package/docs/ui/components/breadcrumb.mdx +0 -199
- package/docs/ui/components/buttons.mdx +0 -1213
- package/docs/ui/components/cards.mdx +0 -417
- package/docs/ui/components/carousel.mdx +0 -459
- package/docs/ui/components/charts.mdx +0 -697
- package/docs/ui/components/countup.mdx +0 -165
- package/docs/ui/components/datagrid.mdx +0 -120
- package/docs/ui/components/divider.mdx +0 -68
- package/docs/ui/components/dropdowns.mdx +0 -302
- package/docs/ui/components/dropzone.mdx +0 -88
- package/docs/ui/components/empty.mdx +0 -149
- package/docs/ui/components/icons.mdx +0 -392
- package/docs/ui/components/index.mdx +0 -6
- package/docs/ui/components/inline-player.mdx +0 -58
- package/docs/ui/components/modals.mdx +0 -297
- package/docs/ui/components/offcanvas.mdx +0 -70
- package/docs/ui/components/placeholder.mdx +0 -273
- package/docs/ui/components/popover.mdx +0 -142
- package/docs/ui/components/progress.mdx +0 -241
- package/docs/ui/components/range-slider.mdx +0 -32
- package/docs/ui/components/ribbons.mdx +0 -207
- package/docs/ui/components/segmented-control.mdx +0 -401
- package/docs/ui/components/spinners.mdx +0 -135
- package/docs/ui/components/statuses.mdx +0 -322
- package/docs/ui/components/steps.mdx +0 -174
- package/docs/ui/components/switch-icon.mdx +0 -386
- package/docs/ui/components/tables.mdx +0 -397
- package/docs/ui/components/tabs.mdx +0 -396
- package/docs/ui/components/timelines.mdx +0 -697
- package/docs/ui/components/tinymce.mdx +0 -46
- package/docs/ui/components/toasts.mdx +0 -126
- package/docs/ui/components/tooltips.mdx +0 -65
- package/docs/ui/components/tracking.mdx +0 -548
- package/docs/ui/components/vector-maps.mdx +0 -166
- package/docs/ui/forms/form-color-check.mdx +0 -220
- package/docs/ui/forms/form-elements.mdx +0 -632
- package/docs/ui/forms/form-fieldset.mdx +0 -45
- package/docs/ui/forms/form-helpers.mdx +0 -91
- package/docs/ui/forms/form-image-check.mdx +0 -213
- package/docs/ui/forms/form-input-mask.mdx +0 -61
- package/docs/ui/forms/form-selectboxes.mdx +0 -398
- package/docs/ui/forms/form-validation.mdx +0 -62
- package/docs/ui/forms/index.mdx +0 -6
- package/docs/ui/getting-started/browser-support.mdx +0 -28
- package/docs/ui/getting-started/customize.mdx +0 -28
- package/docs/ui/getting-started/download.mdx +0 -44
- package/docs/ui/getting-started/faq.mdx +0 -30
- package/docs/ui/getting-started/how-to-contribute.mdx +0 -84
- package/docs/ui/getting-started/index.mdx +0 -16
- package/docs/ui/getting-started/installation.mdx +0 -67
- package/docs/ui/getting-started/license.mdx +0 -30
- package/docs/ui/index.mdx +0 -8
- package/docs/ui/layout/index.mdx +0 -6
- package/docs/ui/layout/navbars.mdx +0 -164
- package/docs/ui/layout/navs-tabls.mdx +0 -201
- package/docs/ui/layout/page-headers.mdx +0 -365
- package/docs/ui/layout/page-layouts.mdx +0 -213
- package/docs/ui/plugins/flags.mdx +0 -316
- package/docs/ui/plugins/index.mdx +0 -6
- package/docs/ui/plugins/payments.mdx +0 -152
- package/docs/ui/plugins/social-icons.mdx +0 -135
- package/docs/ui/utilities/borders.mdx +0 -260
- package/docs/ui/utilities/cursors.mdx +0 -63
- package/docs/ui/utilities/index.mdx +0 -5
- package/docs/ui/utilities/interactions.mdx +0 -26
- package/docs/ui/utilities/margins.mdx +0 -234
- package/docs/ui/utilities/vertical-align.mdx +0 -66
- package/docs/ui/utilities/visually-hidden.mdx +0 -12
- package/js/tabler.umd.js +0 -15
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: React
|
|
3
|
-
description: Tabler Icons library for React framework.
|
|
4
|
-
summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics.
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-

|
|
8
|
-
|
|
9
|
-
## Installation
|
|
10
|
-
|
|
11
|
-
<TabsPackage name="@tabler/icons-react" />
|
|
12
|
-
|
|
13
|
-
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
|
14
|
-
|
|
15
|
-
## How to use
|
|
16
|
-
|
|
17
|
-
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
|
18
|
-
|
|
19
|
-
```jsx
|
|
20
|
-
import { IconArrowLeft } from '@tabler/icons-react';
|
|
21
|
-
|
|
22
|
-
const App = () => {
|
|
23
|
-
return <IconArrowLeft />;
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
export default App;
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
You can pass additional props to adjust the icon.
|
|
30
|
-
|
|
31
|
-
```js
|
|
32
|
-
<IconArrowLeft color="red" size={48} />
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
### Props
|
|
36
|
-
|
|
37
|
-
| name | type | default |
|
|
38
|
-
| ------------- | -------- | ------------ |
|
|
39
|
-
| `size` | _Number_ | 24 |
|
|
40
|
-
| `color` | _String_ | currentColor |
|
|
41
|
-
| `stroke` | _Number_ | 2 |
|
|
42
|
-
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: SolidJS
|
|
3
|
-
description: Tabler Icons library for SolidJS framework.
|
|
4
|
-
summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces.
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-

|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
## Installation
|
|
11
|
-
|
|
12
|
-
<TabsPackage name="@tabler/icons-solidjs" />
|
|
13
|
-
|
|
14
|
-
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
|
15
|
-
|
|
16
|
-
## How to use
|
|
17
|
-
|
|
18
|
-
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
|
19
|
-
|
|
20
|
-
```js
|
|
21
|
-
import { IconArrowRight } from '@tabler/icons-solidjs';
|
|
22
|
-
|
|
23
|
-
const App = () => {
|
|
24
|
-
return <IconArrowRight />;
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export default App;
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
You can pass additional props to adjust the icon.
|
|
31
|
-
|
|
32
|
-
```js
|
|
33
|
-
<IconArrowRight color="red" size={48} />
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
### Props
|
|
37
|
-
|
|
38
|
-
| name | type | default |
|
|
39
|
-
| ------------- | -------- | ------------ |
|
|
40
|
-
| `size` | _Number_ | 24 |
|
|
41
|
-
| `color` | _String_ | currentColor |
|
|
42
|
-
| `stroke` | _Number_ | 2 |
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Svelte
|
|
3
|
-
description: Tabler Icons library for Svelte framework.
|
|
4
|
-
summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs.
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-

|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
## Installation
|
|
11
|
-
|
|
12
|
-
<TabsPackage name="@tabler/icons-svelte" />
|
|
13
|
-
|
|
14
|
-
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
|
15
|
-
|
|
16
|
-
## How to use
|
|
17
|
-
|
|
18
|
-
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
|
19
|
-
|
|
20
|
-
```sveltehtml
|
|
21
|
-
<script lang="ts">
|
|
22
|
-
import { IconHeart } from '@tabler/icons-svelte';
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
<main>
|
|
26
|
-
<IconHeart />
|
|
27
|
-
</main>
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
You can pass additional props to adjust the icon.
|
|
31
|
-
|
|
32
|
-
```sveltehtml
|
|
33
|
-
<IconHeart size={48} stroke={1} />
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
### Props
|
|
37
|
-
|
|
38
|
-
| name | type | default |
|
|
39
|
-
| ------------- | -------- | ------------ |
|
|
40
|
-
| `size` | _Number_ | 24 |
|
|
41
|
-
| `color` | _String_ | currentColor |
|
|
42
|
-
| `stroke` | _Number_ | 2 |
|
|
43
|
-
| `class` | _String_ | |
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Vue
|
|
3
|
-
description: Tabler Icons library for Vue framework.
|
|
4
|
-
summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces.
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-

|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
## Installation
|
|
11
|
-
|
|
12
|
-
<TabsPackage name="@tabler/icons-vue" />
|
|
13
|
-
|
|
14
|
-
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
|
15
|
-
|
|
16
|
-
## How to use
|
|
17
|
-
|
|
18
|
-
All icons are Vue components that contain SVG elements, so any icon can be imported and used as a component. It also helps to use treeshaking, so you only import the icons you use.
|
|
19
|
-
|
|
20
|
-
```vue
|
|
21
|
-
<template>
|
|
22
|
-
<IconHome />
|
|
23
|
-
</template>
|
|
24
|
-
|
|
25
|
-
<script>
|
|
26
|
-
// Returns Vue component
|
|
27
|
-
import { IconHome } from '@tabler/icons-vue';
|
|
28
|
-
|
|
29
|
-
export default {
|
|
30
|
-
components: {
|
|
31
|
-
IconHome
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
</script>
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
You can pass additional props to adjust the icon.
|
|
38
|
-
|
|
39
|
-
```html
|
|
40
|
-
<IconHome color="red" :size="48" stroke-width="1" />
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
### Props
|
|
44
|
-
|
|
45
|
-
| name | type | default |
|
|
46
|
-
| ------------- | -------- | ------------ |
|
|
47
|
-
| `size` | _Number_ | 24 |
|
|
48
|
-
| `color` | _String_ | currentColor |
|
|
49
|
-
| `stroke` | _Number_ | 2 |
|
|
50
|
-
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Webfont
|
|
3
|
-
description: Tabler Icons as a webfont.
|
|
4
|
-
summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development.
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-

|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
## Installation
|
|
11
|
-
|
|
12
|
-
```
|
|
13
|
-
yarn add @tabler/icons-webfont
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
or
|
|
17
|
-
|
|
18
|
-
```
|
|
19
|
-
npm install @tabler/icons-webfont
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
or
|
|
23
|
-
|
|
24
|
-
```
|
|
25
|
-
pnpm install @tabler/icons-webfont
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
|
29
|
-
|
|
30
|
-
### CDN
|
|
31
|
-
|
|
32
|
-
```html
|
|
33
|
-
<link
|
|
34
|
-
rel="stylesheet"
|
|
35
|
-
href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@$ICONS_VERSION/dist/tabler-icons.min.css"
|
|
36
|
-
/>
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
Instead of a specific version, you can use `latest` to always get the newest icons.
|
|
40
|
-
|
|
41
|
-
## Usage
|
|
42
|
-
|
|
43
|
-
### HTML
|
|
44
|
-
|
|
45
|
-
```html
|
|
46
|
-
<i class="ti ti-brand-tabler"></i>
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### CSS
|
|
50
|
-
|
|
51
|
-
```css
|
|
52
|
-
content: 'ec8f';
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
### SCSS
|
|
57
|
-
|
|
58
|
-
```scss
|
|
59
|
-
content: $ti-icon-brand-tabler;
|
|
60
|
-
```
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Figma plugin
|
|
3
|
-
description: Use Tabler Icons directly in Figma.
|
|
4
|
-
summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow.
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-

|
|
8
|
-
|
|
9
|
-
The Tabler Icons Figma plugin is an essential tool for designers looking to enhance their workflow. It provides seamless access to a comprehensive library of high-quality, customizable icons directly within Figma. Whether you're designing dashboards, websites, or mobile apps, this plugin allows you to quickly search, preview, and integrate Tabler Icons into your projects, saving time and ensuring a consistent, modern aesthetic.
|
|
10
|
-
|
|
11
|
-
## Usage
|
|
12
|
-
|
|
13
|
-
Using the plugin is simple: install it from the Figma community, launch it within your design file, and search for the desired icon by keyword. Once you’ve found the perfect icon, click to insert it into your design. You can easily customize the icon’s size, color, and stroke weight to fit your specific needs, making it a versatile addition to your design toolkit.
|
|
14
|
-
|
|
15
|
-
<BlogButton href="https://www.figma.com/community/plugin/1169807996149376642/Tabler-Icons">Download Plugin</BlogButton>
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: EPS version
|
|
3
|
-
description: Download Tabler Icons in EPS format.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-

|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
## Installation
|
|
10
|
-
|
|
11
|
-
<TabsPackage name="@tabler/icons-eps" />
|
|
12
|
-
|
|
13
|
-
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
|
14
|
-
|
|
15
|
-
All EPS files are stored in `icons` subdirectory.
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: PDF version
|
|
3
|
-
description: Download Tabler Icons in PDF format.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-

|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
## Installation
|
|
10
|
-
|
|
11
|
-
<TabsPackage name="@tabler/icons-pdf" />
|
|
12
|
-
|
|
13
|
-
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
|
14
|
-
|
|
15
|
-
All PDF files are stored in `icons` subdirectory.
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: PNG version
|
|
3
|
-
description: Download Tabler Icons in PNG format.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-

|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
## Installation
|
|
10
|
-
|
|
11
|
-
<TabsPackage name="@tabler/icons-png" />
|
|
12
|
-
|
|
13
|
-
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
|
14
|
-
|
|
15
|
-
All PNG files are stored in `icons` subdirectory.
|
|
16
|
-
|
|
17
|
-
## CDN
|
|
18
|
-
|
|
19
|
-
#### Outline version
|
|
20
|
-
|
|
21
|
-
```html
|
|
22
|
-
<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/outline/home.png" />
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
#### Filled version
|
|
26
|
-
|
|
27
|
-
```html
|
|
28
|
-
<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/filled/home.png" />
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
Instead of a specific version, you can use `latest` to always get the newest icons.
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: SVG version
|
|
3
|
-
description: Download Tabler Icons in SVG format.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-

|
|
7
|
-
|
|
8
|
-
## Installation
|
|
9
|
-
|
|
10
|
-
<TabsPackage name="@tabler/icons" />
|
|
11
|
-
|
|
12
|
-
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
|
13
|
-
|
|
14
|
-
## Usage
|
|
15
|
-
|
|
16
|
-
All icons are built with SVG, so you can place them as `<img>`, `background-image` and inline in HTML code.
|
|
17
|
-
|
|
18
|
-
### HTML image
|
|
19
|
-
|
|
20
|
-
If you load an icon as an image, you can modify its size using CSS.
|
|
21
|
-
|
|
22
|
-
```html
|
|
23
|
-
<img src="path/to/icon.svg" alt="icon title" />
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
### Inline HTML
|
|
27
|
-
|
|
28
|
-
You can paste the content of the icon file into your HTML code to display it on the page.
|
|
29
|
-
|
|
30
|
-
```html
|
|
31
|
-
<a href="">
|
|
32
|
-
<svg
|
|
33
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
34
|
-
class="icon icon-tabler icon-tabler-disabled"
|
|
35
|
-
width="24"
|
|
36
|
-
height="24"
|
|
37
|
-
viewBox="0 0 24 24"
|
|
38
|
-
stroke-width="1.25"
|
|
39
|
-
stroke="currentColor"
|
|
40
|
-
fill="none"
|
|
41
|
-
stroke-linecap="round"
|
|
42
|
-
stroke-linejoin="round"
|
|
43
|
-
>
|
|
44
|
-
...
|
|
45
|
-
</svg>
|
|
46
|
-
Click me
|
|
47
|
-
</a>
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
Thanks to that, you can change the size, color and the `stroke-width` of the icons with CSS code.
|
|
51
|
-
|
|
52
|
-
```css
|
|
53
|
-
.icon-tabler {
|
|
54
|
-
color: red;
|
|
55
|
-
width: 32px;
|
|
56
|
-
height: 32px;
|
|
57
|
-
stroke-width: 1.25;
|
|
58
|
-
}
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### SVG sprite
|
|
62
|
-
|
|
63
|
-
Add an icon to be displayed on your page with the following markup (`activity` in the above example can be replaced with any valid icon name):
|
|
64
|
-
|
|
65
|
-
```html
|
|
66
|
-
<svg width="24" height="24">
|
|
67
|
-
<use xlink:href="path/to/tabler-sprite.svg#tabler-activity" />
|
|
68
|
-
</svg>
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
## CDN
|
|
72
|
-
|
|
73
|
-
#### Outline version
|
|
74
|
-
|
|
75
|
-
```html
|
|
76
|
-
<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/outline/home.svg" />
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
#### Filled version
|
|
80
|
-
|
|
81
|
-
```html
|
|
82
|
-
<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/filled/home.svg" />
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
Instead of a specific version, you can use `latest` to always get the newest icons.
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Tabler Illustrations
|
|
3
|
-
order: 3
|
|
4
|
-
description: Customizable illustrations for modern web and mobile designs.
|
|
5
|
-
summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-

|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Contents
|
|
3
|
-
description: Explore Tabler Illustrations folder structure
|
|
4
|
-
summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.
|
|
8
|
-
|
|
9
|
-
## Folder Structure
|
|
10
|
-
|
|
11
|
-
Once downloaded, unzip the compressed folder and you’ll see something like this:
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
tabler-illustrations/
|
|
15
|
-
├── eps/
|
|
16
|
-
| ├── dark/
|
|
17
|
-
| └── light/
|
|
18
|
-
├── figma/
|
|
19
|
-
├── pdf/
|
|
20
|
-
| ├── dark/
|
|
21
|
-
| └── light/
|
|
22
|
-
├── png/
|
|
23
|
-
| ├── dark/
|
|
24
|
-
| └── light/
|
|
25
|
-
├── png-background/
|
|
26
|
-
| ├── dark/
|
|
27
|
-
| └── light/
|
|
28
|
-
├── svg/
|
|
29
|
-
| ├── dark/
|
|
30
|
-
| └── light/
|
|
31
|
-
├── svg-css-autodark/
|
|
32
|
-
└── svg-css-variables/
|
|
33
|
-
├── dark/
|
|
34
|
-
└── light/
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
## Understanding the File Structure in Tabler Illustrations
|
|
38
|
-
|
|
39
|
-
The **Tabler Illustrations** package is organized into a clear and efficient folder structure to streamline the use of its high-quality assets. Below is a breakdown of its key directories:
|
|
40
|
-
|
|
41
|
-
### 1. Vector Files: `eps/`
|
|
42
|
-
This folder contains EPS files for scalable vector illustrations.
|
|
43
|
-
- `dark/`: Dark-themed illustrations.
|
|
44
|
-
- `light/`: Light-themed illustrations.
|
|
45
|
-
|
|
46
|
-
### 2. Design File: `figma/`
|
|
47
|
-
This folder contains a Figma file, perfect for designers who work directly in Figma.
|
|
48
|
-
|
|
49
|
-
### 3. Document Files: `pdf/`
|
|
50
|
-
This folder contains PDF files, ideal for print or presentation use.
|
|
51
|
-
- `dark/`: Dark-themed illustrations.
|
|
52
|
-
- `light/`: Light-themed illustrations.
|
|
53
|
-
|
|
54
|
-
### 4. Transparent Images: `png/`
|
|
55
|
-
This folder stores PNG files with transparent backgrounds at 1600 × 1200px resolution.
|
|
56
|
-
- `dark/`: Dark-themed illustrations.
|
|
57
|
-
- `light/`: Light-themed illustrations.
|
|
58
|
-
|
|
59
|
-
### 5. Background Images: `png-background/`
|
|
60
|
-
This folder contains PNG files with a dark background for enhanced contrast.
|
|
61
|
-
- `dark/`: Dark-themed illustrations.
|
|
62
|
-
- `light/`: Light-themed illustrations.
|
|
63
|
-
|
|
64
|
-
### 6. Scalable Vector Graphics: `svg/`
|
|
65
|
-
This folder includes SVG files for scalable and customizable vector graphics.
|
|
66
|
-
- `dark/`: Dark-themed illustrations.
|
|
67
|
-
- `light/`: Light-themed illustrations.
|
|
68
|
-
|
|
69
|
-
### 7. Adaptive Graphics: `svg-css-autodark/`
|
|
70
|
-
This folder contains SVG files prepared to automatically adjust their colors based on user settings, providing a dynamic and adaptive visual experience.
|
|
71
|
-
|
|
72
|
-
### 8. Themed Graphics: `svg-css-variables/`
|
|
73
|
-
This folder contains SVG files using CSS variables for flexible theming.
|
|
74
|
-
- `dark/`: Dark-themed illustrations.
|
|
75
|
-
- `light/`: Light-themed illustrations.
|
|
76
|
-
|
|
77
|
-
This structure ensures easy access to various formats and themes, making Tabler Illustrations a versatile tool for developers and designers alike.
|