@tabler/core 1.1.0 → 1.1.1

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.
Files changed (145) hide show
  1. package/docs/emails/index.mdx +14 -0
  2. package/docs/emails/introduction/compiled-html.mdx +29 -0
  3. package/docs/emails/introduction/contents.mdx +63 -0
  4. package/docs/emails/introduction/index.mdx +9 -0
  5. package/docs/emails/introduction/source-html.mdx +26 -0
  6. package/docs/icons/index.mdx +13 -0
  7. package/docs/icons/libraries/index.mdx +5 -0
  8. package/docs/icons/libraries/preact.mdx +42 -0
  9. package/docs/icons/libraries/react.mdx +42 -0
  10. package/docs/icons/libraries/solidjs.mdx +42 -0
  11. package/docs/icons/libraries/svelte.mdx +43 -0
  12. package/docs/icons/libraries/vue.mdx +50 -0
  13. package/docs/icons/libraries/webfont.mdx +60 -0
  14. package/docs/icons/plugins/figma.mdx +15 -0
  15. package/docs/icons/plugins/index.mdx +4 -0
  16. package/docs/icons/static-files/eps.mdx +15 -0
  17. package/docs/icons/static-files/index.mdx +5 -0
  18. package/docs/icons/static-files/pdf.mdx +15 -0
  19. package/docs/icons/static-files/png.mdx +31 -0
  20. package/docs/icons/static-files/svg.mdx +85 -0
  21. package/docs/illustrations/index.mdx +8 -0
  22. package/docs/illustrations/introduction/contents.mdx +77 -0
  23. package/docs/illustrations/introduction/customization.mdx +1198 -0
  24. package/docs/illustrations/introduction/index.mdx +5 -0
  25. package/docs/illustrations/introduction/license.mdx +90 -0
  26. package/docs/img/browsers/brave.svg +1 -0
  27. package/docs/img/browsers/chrome.svg +1 -0
  28. package/docs/img/browsers/edge.svg +1 -0
  29. package/docs/img/browsers/electron.svg +1 -0
  30. package/docs/img/browsers/firefox.svg +1 -0
  31. package/docs/img/browsers/internet-explorer.svg +1 -0
  32. package/docs/img/browsers/opera.svg +1 -0
  33. package/docs/img/browsers/safari.svg +1 -0
  34. package/docs/img/browsers/vivaldi.svg +1 -0
  35. package/docs/img/cover-illustrations-dark.png +0 -0
  36. package/docs/img/cover-illustrations.png +0 -0
  37. package/docs/img/cover-tabler-dark.png +0 -0
  38. package/docs/img/cover-tabler.png +0 -0
  39. package/docs/img/icons/figma-plugin.png +0 -0
  40. package/docs/img/icons/package-angular-dark.png +0 -0
  41. package/docs/img/icons/package-angular.png +0 -0
  42. package/docs/img/icons/package-eps-dark.png +0 -0
  43. package/docs/img/icons/package-eps.png +0 -0
  44. package/docs/img/icons/package-js-dark.png +0 -0
  45. package/docs/img/icons/package-js.png +0 -0
  46. package/docs/img/icons/package-pdf-dark.png +0 -0
  47. package/docs/img/icons/package-pdf.png +0 -0
  48. package/docs/img/icons/package-png-dark.png +0 -0
  49. package/docs/img/icons/package-png.png +0 -0
  50. package/docs/img/icons/package-preact-dark.png +0 -0
  51. package/docs/img/icons/package-preact.png +0 -0
  52. package/docs/img/icons/package-react-dark.png +0 -0
  53. package/docs/img/icons/package-react-native-dark.png +0 -0
  54. package/docs/img/icons/package-react-native.png +0 -0
  55. package/docs/img/icons/package-react.png +0 -0
  56. package/docs/img/icons/package-solidjs-dark.png +0 -0
  57. package/docs/img/icons/package-solidjs.png +0 -0
  58. package/docs/img/icons/package-sprite-dark.png +0 -0
  59. package/docs/img/icons/package-sprite.png +0 -0
  60. package/docs/img/icons/package-svelte-dark.png +0 -0
  61. package/docs/img/icons/package-svelte.png +0 -0
  62. package/docs/img/icons/package-svg-dark.png +0 -0
  63. package/docs/img/icons/package-svg.png +0 -0
  64. package/docs/img/icons/package-vue-dark.png +0 -0
  65. package/docs/img/icons/package-vue.png +0 -0
  66. package/docs/img/icons/package-webfont-dark.png +0 -0
  67. package/docs/img/icons/package-webfont.png +0 -0
  68. package/docs/index.mdx +16 -0
  69. package/docs/ui/base/colors.mdx +83 -0
  70. package/docs/ui/base/index.mdx +6 -0
  71. package/docs/ui/base/typography.mdx +311 -0
  72. package/docs/ui/components/alerts.mdx +406 -0
  73. package/docs/ui/components/autosize.mdx +25 -0
  74. package/docs/ui/components/avatars.mdx +227 -0
  75. package/docs/ui/components/badges.mdx +112 -0
  76. package/docs/ui/components/breadcrumb.mdx +199 -0
  77. package/docs/ui/components/buttons.mdx +1213 -0
  78. package/docs/ui/components/cards.mdx +417 -0
  79. package/docs/ui/components/carousel.mdx +459 -0
  80. package/docs/ui/components/charts.mdx +697 -0
  81. package/docs/ui/components/countup.mdx +165 -0
  82. package/docs/ui/components/datagrid.mdx +120 -0
  83. package/docs/ui/components/divider.mdx +68 -0
  84. package/docs/ui/components/dropdowns.mdx +302 -0
  85. package/docs/ui/components/dropzone.mdx +88 -0
  86. package/docs/ui/components/empty.mdx +149 -0
  87. package/docs/ui/components/icons.mdx +392 -0
  88. package/docs/ui/components/index.mdx +6 -0
  89. package/docs/ui/components/inline-player.mdx +58 -0
  90. package/docs/ui/components/modals.mdx +297 -0
  91. package/docs/ui/components/offcanvas.mdx +70 -0
  92. package/docs/ui/components/placeholder.mdx +273 -0
  93. package/docs/ui/components/popover.mdx +142 -0
  94. package/docs/ui/components/progress.mdx +241 -0
  95. package/docs/ui/components/range-slider.mdx +32 -0
  96. package/docs/ui/components/ribbons.mdx +207 -0
  97. package/docs/ui/components/segmented-control.mdx +401 -0
  98. package/docs/ui/components/spinners.mdx +135 -0
  99. package/docs/ui/components/statuses.mdx +322 -0
  100. package/docs/ui/components/steps.mdx +174 -0
  101. package/docs/ui/components/switch-icon.mdx +386 -0
  102. package/docs/ui/components/tables.mdx +397 -0
  103. package/docs/ui/components/tabs.mdx +396 -0
  104. package/docs/ui/components/timelines.mdx +697 -0
  105. package/docs/ui/components/tinymce.mdx +46 -0
  106. package/docs/ui/components/toasts.mdx +126 -0
  107. package/docs/ui/components/tooltips.mdx +65 -0
  108. package/docs/ui/components/tracking.mdx +548 -0
  109. package/docs/ui/components/vector-maps.mdx +166 -0
  110. package/docs/ui/forms/form-color-check.mdx +220 -0
  111. package/docs/ui/forms/form-elements.mdx +632 -0
  112. package/docs/ui/forms/form-fieldset.mdx +45 -0
  113. package/docs/ui/forms/form-helpers.mdx +91 -0
  114. package/docs/ui/forms/form-image-check.mdx +213 -0
  115. package/docs/ui/forms/form-input-mask.mdx +61 -0
  116. package/docs/ui/forms/form-selectboxes.mdx +398 -0
  117. package/docs/ui/forms/form-validation.mdx +62 -0
  118. package/docs/ui/forms/index.mdx +6 -0
  119. package/docs/ui/getting-started/browser-support.mdx +28 -0
  120. package/docs/ui/getting-started/customize.mdx +28 -0
  121. package/docs/ui/getting-started/download.mdx +44 -0
  122. package/docs/ui/getting-started/faq.mdx +30 -0
  123. package/docs/ui/getting-started/how-to-contribute.mdx +84 -0
  124. package/docs/ui/getting-started/index.mdx +16 -0
  125. package/docs/ui/getting-started/installation.mdx +67 -0
  126. package/docs/ui/getting-started/license.mdx +30 -0
  127. package/docs/ui/index.mdx +8 -0
  128. package/docs/ui/layout/index.mdx +6 -0
  129. package/docs/ui/layout/navbars.mdx +164 -0
  130. package/docs/ui/layout/navs-tabls.mdx +201 -0
  131. package/docs/ui/layout/page-headers.mdx +365 -0
  132. package/docs/ui/layout/page-layouts.mdx +213 -0
  133. package/docs/ui/plugins/flags.mdx +316 -0
  134. package/docs/ui/plugins/index.mdx +6 -0
  135. package/docs/ui/plugins/payments.mdx +152 -0
  136. package/docs/ui/plugins/social-icons.mdx +135 -0
  137. package/docs/ui/utilities/borders.mdx +260 -0
  138. package/docs/ui/utilities/cursors.mdx +63 -0
  139. package/docs/ui/utilities/index.mdx +5 -0
  140. package/docs/ui/utilities/interactions.mdx +26 -0
  141. package/docs/ui/utilities/margins.mdx +234 -0
  142. package/docs/ui/utilities/vertical-align.mdx +66 -0
  143. package/docs/ui/utilities/visually-hidden.mdx +12 -0
  144. package/package.json +6 -6
  145. package/LICENSE +0 -21
package/docs/emails/index.mdx ADDED
@@ -0,0 +1,14 @@
1
+ ---
2
+ title: Tabler Emails
3
+ seoTitle: Tabler Emails - premium email templates
4
+ order: 4
5
+ description: Customizable email templates for over 90 clients and devices.
6
+ summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
7
+ seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
8
+ ---
9
+
10
+ # Tabler Emails
11
+
12
+ *Change below image!*
13
+
14
+ ![Tabler Emails](/docs/cover-illustrations.png)
package/docs/emails/introduction/compiled-html.mdx ADDED
@@ -0,0 +1,29 @@
1
+ ---
2
+ title: Compiled templates
3
+ order: 2
4
+ seoTitle: Tabler Emails - How to use the compiled HTML email templates
5
+ description: Learn how to use the compiled HTML email templates from the Tabler Emails package.
6
+ summary: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
7
+ seoDescription: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
8
+ ---
9
+
10
+ ## Compiled version of the template
11
+
12
+ If you only want to change a content - text or images - of the email template, you can just use the compiled HTML files - `compiled.html`. They are ready to use, and you need only a basic knowledge of HTML to modify them.
13
+
14
+ ## How to modify the compiled HTML files
15
+
16
+ 1. Open the `compiled.html` file in your favorite code editor.
17
+ 2. Find the content you want to change inside the `<body>` element.
18
+ 3. Modify the content as needed:
19
+ * Change the text, which is mostly placed inside the `<p>` or `<h1>` tags.
20
+ * Change the images by replacing the `src` attribute of the `<img>` tag.
21
+ * Change the links by replacing the `href` attribute of the `<a>` tag.
22
+ * Remove the HTML elements you don't need, but only if you're sure that they are not necessary for the email template to work correctly.
23
+ 4. If you changed the images, make sure to replace them in the `assets/` folder.
24
+ 5. Remove all the images you don't use from `assets/` to reduce the size of the email template.
25
+
26
+ ## How to use the compiled HTML files
27
+
28
+ After changing the templates as needed, you can use them in your email campaigns.
29
+ The `compiled.html` file with the `assets/` folder should be sent to your email marketing tool, like Mailchimp, SendGrid, or any other.
package/docs/emails/introduction/contents.mdx ADDED
@@ -0,0 +1,63 @@
1
+ ---
2
+ title: Contents
3
+ order: 1
4
+ seoTitle: Tabler Emails - Content of the package
5
+ description: Content of the Tabler Emails package.
6
+ summary: The Tabler Emails package contains files which can be used by everyone, even without great knowledge of HTML.
7
+ seoDescription: todo
8
+ ---
9
+
10
+ ## Folder structure
11
+
12
+ Once you unzip the downloaded file, you will see the following structure:
13
+
14
+ ```
15
+ tabler-emails/
16
+ ├── emails/
17
+ | ├── absence/
18
+ | | ├── assets/
19
+ | | ├── compiled.html
20
+ | | ├── compiled-dark.html
21
+ | | ├── source.html
22
+ | | ├── source-dark.html
23
+ | | ├── screenshot.jpg
24
+ | | ├── screenshot-dark.jpg
25
+ | | ├── screenshot-mobile.jpg
26
+ | | └── screenshot-mobile-dark.jpg
27
+ | ├── access-token/
28
+ | ├── account-deleted/
29
+ | ├── .../
30
+ | ├── welcome/
31
+ | └── whishlist/
32
+ ├── images/
33
+ | ├── chart-donuts/
34
+ | ├── icons/
35
+ | ├── illustrations/
36
+ | └── overlays/
37
+ ├── license.txt
38
+ └── readme.html
39
+ ```
40
+
41
+ ## Understanding the file structure in Tabler Emails
42
+
43
+ The **Tabler Emails** package is organized into a clear and efficient folder structure to streamline the use of its assets. Below is a breakdown of its key directories:
44
+
45
+ ### 1. Email Templates: `emails/`
46
+ This folder contains <EmailsCount /> email subfolders, each with a specific template. Each email folder contains the following files:
47
+ * Compiled HTML files for light and dark themes. Read more about its usage in the [Compiled HTML](/docs/emails/compiled-html) section.
48
+ * Source HTML files for light and dark themes. Find more information in the [Source HTML](/docs/emails/source-html) section.
49
+ * Screenshot images for desktop and mobile views.
50
+ * Assets folder with images used in the email template and the CSS file with styles
51
+
52
+ ### 2. Images: `images/`
53
+ It contains 4 subfolders with images used across the different email templates:
54
+ * `chart-donuts/`: Images of donut charts with different fill.
55
+ * `icons/`: [Tabler Icons](/icons) used in the email templates, in PNG version.
56
+ * `illustrations/`: PNG versions of [Tabler Illustrations](/illustrations) for light and dark themes.
57
+ * `overlays/`: overlay images used in the email templates.
58
+
59
+ ### 3. License: `license.txt`
60
+ This file contains the license information for the Tabler Emails package.
61
+
62
+ ### 4. Readme: `readme.html`
63
+ This file with the main information about the Tabler Emails package. It contains a brief description of the package and instructions on how to use it.
package/docs/emails/introduction/index.mdx ADDED
@@ -0,0 +1,9 @@
1
+ ---
2
+ title: Introduction
3
+ seoTitle: Introduction to Tabler Emails
4
+ description: Base information about Tabler Emails package.
5
+ summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
6
+ seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
7
+ ---
8
+
9
+
package/docs/emails/introduction/source-html.mdx ADDED
@@ -0,0 +1,26 @@
1
+ ---
2
+ title: Source templates
3
+ order: 3
4
+ seoTitle: Tabler Emails - How to use the source HTML email templates
5
+ description: Learn how to use the source HTML email templates from the Tabler Emails package.
6
+ summary: The source HTML files from the Tabler Emails package needs a bit more work that the compiled ones. Learn how to use them.
7
+ seoDescription: The source HTML files from the Tabler Emails package needs a bit more work that the compiled ones. Learn how to use them.
8
+ ---
9
+
10
+ ## Source version of the template
11
+
12
+ If you want to make more advanced changes to the email template, you can use the source HTML files - `source.html` combined with the `theme.css` file. They are ready to use, but you need a basic knowledge of HTML and CSS to modify them.
13
+
14
+ ## How to modify the source HTML files
15
+
16
+ 1. Open the `source.html` file in your favorite code editor.
17
+ 2. Open the `theme.css` file from `assets/`* directory in the same editor.
18
+ 3. Change all the content and styles as needed.
19
+ 4. Use a selected tool to inline the CSS styles into the HTML file. There are a lot of options, like:
20
+ * Online tools like [Juice](https://automattic.github.io/juice/) or [Mailchimp CSS Inliner Tool](https://templates.mailchimp.com/resources/inline-css/).
21
+ * NPM tools like [juice](https://www.npmjs.com/package/juice) or [inline-css](https://www.npmjs.com/package/inline-css).
22
+ 5. Save the output HTML file.
23
+
24
+ ## How to use the source HTML files
25
+
26
+ To use the modified HTML template send the output file with the `assets/` folder to your email marketing tool.
package/docs/icons/index.mdx ADDED
@@ -0,0 +1,13 @@
1
+ ---
2
+ title: Tabler Icons
3
+ summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
4
+ order: 2
5
+ description: Over 5000 pixel-perfect icons for web design and development
6
+ ---
7
+
8
+ ## Browse icons
9
+
10
+ Tabler Icons is a comprehensive icon library that features over <IconsCount rounded /> high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
11
+
12
+ To use Tabler Icons, you can visit their website at https://tabler-icons.io. From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.
13
+
package/docs/icons/libraries/index.mdx ADDED
@@ -0,0 +1,5 @@
1
+ ---
2
+ title: Libraries
3
+ description: Explore Tabler Icons libraries.
4
+ summary: The libraries section offers various integrations of Tabler Icons for popular frameworks and technologies, making it easy to incorporate icons into any project.
5
+ ---
package/docs/icons/libraries/preact.mdx ADDED
@@ -0,0 +1,42 @@
1
+ ---
2
+ title: Preact
3
+ description: Tabler Icons library for Preact framework.
4
+ summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects.
5
+ ---
6
+
7
+ ![](/docs/icons/package-preact.png)
8
+
9
+ ## Installation
10
+
11
+ <TabsPackage name="@tabler/icons-preact" />
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
+ ```js
20
+ import { IconArrowDown } from '@tabler/icons-preact';
21
+
22
+ const App = () => {
23
+ return <IconArrowDown />;
24
+ };
25
+
26
+ export default App;
27
+ ```
28
+
29
+ You can pass additional props to adjust the icon.
30
+
31
+ ```js
32
+ <IconArrowDown 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
+
package/docs/icons/libraries/react.mdx ADDED
@@ -0,0 +1,42 @@
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
+ ![](/docs/icons/package-react.png)
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
+
package/docs/icons/libraries/solidjs.mdx ADDED
@@ -0,0 +1,42 @@
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
+ ![](/docs/icons/package-solidjs.png)
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 |
package/docs/icons/libraries/svelte.mdx ADDED
@@ -0,0 +1,43 @@
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
+ ![](/docs/icons/package-svelte.png)
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_ | |
package/docs/icons/libraries/vue.mdx ADDED
@@ -0,0 +1,50 @@
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
+ ![](/docs/icons/package-vue.png)
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
+
package/docs/icons/libraries/webfont.mdx ADDED
@@ -0,0 +1,60 @@
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
+ ![](/docs/icons/package-webfont.png)
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
+ ```
package/docs/icons/plugins/figma.mdx ADDED
@@ -0,0 +1,15 @@
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
+ ![Tabler Figma Plugin](/docs/icons/figma-plugin.png)
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>
package/docs/icons/plugins/index.mdx ADDED
@@ -0,0 +1,4 @@
1
+ ---
2
+ title: Plugins
3
+ description: Icon plugins for seamless integration.
4
+ ---
package/docs/icons/static-files/eps.mdx ADDED
@@ -0,0 +1,15 @@
1
+ ---
2
+ title: EPS version
3
+ description: Download Tabler Icons in EPS format.
4
+ ---
5
+
6
+ ![](/docs/icons/package-eps.png)
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.
package/docs/icons/static-files/index.mdx ADDED
@@ -0,0 +1,5 @@
1
+ ---
2
+ title: Static files
3
+ description: Download static file formats of icons.
4
+ summary: Static files provide multiple formats of Tabler Icons, including EPS, PDF, PNG, and SVG, offering flexibility for different design and development workflows.
5
+ ---
package/docs/icons/static-files/pdf.mdx ADDED
@@ -0,0 +1,15 @@
1
+ ---
2
+ title: PDF version
3
+ description: Download Tabler Icons in PDF format.
4
+ ---
5
+
6
+ ![](/docs/icons/package-pdf.png)
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.
package/docs/icons/static-files/png.mdx ADDED
@@ -0,0 +1,31 @@
1
+ ---
2
+ title: PNG version
3
+ description: Download Tabler Icons in PNG format.
4
+ ---
5
+
6
+ ![](/docs/icons/package-png.png)
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.
package/docs/icons/static-files/svg.mdx ADDED
@@ -0,0 +1,85 @@
1
+ ---
2
+ title: SVG version
3
+ description: Download Tabler Icons in SVG format.
4
+ ---
5
+
6
+ ![](/docs/icons/package-svg.png)
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.
package/docs/illustrations/index.mdx ADDED
@@ -0,0 +1,8 @@
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
+ ![](/docs/cover-illustrations.png)