@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.
Files changed (273) hide show
  1. package/LICENSE +21 -0
  2. package/dist/css/tabler-flags.css +2 -2
  3. package/dist/css/tabler-flags.css.map +1 -1
  4. package/dist/css/tabler-flags.min.css +2 -2
  5. package/dist/css/tabler-flags.min.css.map +1 -1
  6. package/dist/css/tabler-flags.rtl.css +2 -2
  7. package/dist/css/tabler-flags.rtl.css.map +1 -1
  8. package/dist/css/tabler-flags.rtl.min.css +2 -2
  9. package/dist/css/tabler-flags.rtl.min.css.map +1 -1
  10. package/dist/css/tabler-marketing.css +6 -6
  11. package/dist/css/tabler-marketing.css.map +1 -1
  12. package/dist/css/tabler-marketing.min.css +2 -2
  13. package/dist/css/tabler-marketing.min.css.map +1 -1
  14. package/dist/css/tabler-marketing.rtl.css +6 -6
  15. package/dist/css/tabler-marketing.rtl.css.map +1 -1
  16. package/dist/css/tabler-marketing.rtl.min.css +2 -2
  17. package/dist/css/tabler-marketing.rtl.min.css.map +1 -1
  18. package/dist/css/tabler-payments.css +1 -1
  19. package/dist/css/tabler-payments.min.css +1 -1
  20. package/dist/css/tabler-payments.rtl.css +1 -1
  21. package/dist/css/tabler-payments.rtl.min.css +1 -1
  22. package/dist/css/tabler-props.css +448 -0
  23. package/dist/css/tabler-props.css.map +1 -0
  24. package/dist/css/tabler-props.min.css +8 -0
  25. package/dist/css/tabler-props.min.css.map +1 -0
  26. package/dist/css/tabler-props.rtl.css +447 -0
  27. package/dist/css/tabler-props.rtl.css.map +1 -0
  28. package/dist/css/tabler-props.rtl.min.css +8 -0
  29. package/dist/css/tabler-props.rtl.min.css.map +1 -0
  30. package/dist/css/tabler-socials.css +1 -1
  31. package/dist/css/tabler-socials.min.css +1 -1
  32. package/dist/css/tabler-socials.rtl.css +1 -1
  33. package/dist/css/tabler-socials.rtl.min.css +1 -1
  34. package/dist/css/tabler-themes.css +213 -0
  35. package/dist/css/tabler-themes.css.map +1 -0
  36. package/dist/css/tabler-themes.min.css +8 -0
  37. package/dist/css/tabler-themes.min.css.map +1 -0
  38. package/dist/css/tabler-themes.rtl.css +212 -0
  39. package/dist/css/tabler-themes.rtl.css.map +1 -0
  40. package/dist/css/tabler-themes.rtl.min.css +8 -0
  41. package/dist/css/tabler-themes.rtl.min.css.map +1 -0
  42. package/dist/css/tabler-vendors.css +31 -16
  43. package/dist/css/tabler-vendors.css.map +1 -1
  44. package/dist/css/tabler-vendors.min.css +2 -2
  45. package/dist/css/tabler-vendors.min.css.map +1 -1
  46. package/dist/css/tabler-vendors.rtl.css +31 -16
  47. package/dist/css/tabler-vendors.rtl.css.map +1 -1
  48. package/dist/css/tabler-vendors.rtl.min.css +2 -2
  49. package/dist/css/tabler-vendors.rtl.min.css.map +1 -1
  50. package/dist/css/tabler.css +7662 -8392
  51. package/dist/css/tabler.css.map +1 -1
  52. package/dist/css/tabler.min.css +2 -2
  53. package/dist/css/tabler.min.css.map +1 -1
  54. package/dist/css/tabler.rtl.css +7751 -8481
  55. package/dist/css/tabler.rtl.css.map +1 -1
  56. package/dist/css/tabler.rtl.min.css +2 -2
  57. package/dist/css/tabler.rtl.min.css.map +1 -1
  58. package/dist/img/flags/kr.svg +1 -1
  59. package/dist/js/tabler-theme.esm.js +38 -0
  60. package/dist/js/tabler-theme.esm.js.map +1 -0
  61. package/dist/js/tabler-theme.esm.min.js +8 -0
  62. package/dist/js/tabler-theme.esm.min.js.map +1 -0
  63. package/dist/js/tabler-theme.js +45 -0
  64. package/dist/js/tabler-theme.js.map +1 -0
  65. package/dist/js/tabler-theme.min.js +8 -0
  66. package/dist/js/tabler-theme.min.js.map +1 -0
  67. package/dist/js/tabler.esm.js +28 -21
  68. package/dist/js/tabler.esm.js.map +1 -1
  69. package/dist/js/tabler.esm.min.js +5 -5
  70. package/dist/js/tabler.esm.min.js.map +1 -1
  71. package/dist/js/tabler.js +36 -24
  72. package/dist/js/tabler.js.map +1 -1
  73. package/dist/js/tabler.min.js +5 -5
  74. package/dist/js/tabler.min.js.map +1 -1
  75. package/js/src/autosize.js +1 -4
  76. package/js/src/input-mask.js +1 -3
  77. package/js/tabler-theme.js +35 -0
  78. package/js/{tabler.esm.js → tabler.js} +16 -0
  79. package/package.json +10 -8
  80. package/scss/_bootstrap-components.scss +0 -5
  81. package/scss/_core.scss +4 -0
  82. package/scss/_props.scss +91 -0
  83. package/scss/_utilities.scss +30 -1
  84. package/scss/_variables-dark.scss +1 -1
  85. package/scss/_variables.scss +79 -60
  86. package/scss/helpers/_index.scss +143 -0
  87. package/scss/layout/_core.scss +1 -0
  88. package/scss/layout/_dark.scss +33 -38
  89. package/scss/layout/_navbar.scss +2 -1
  90. package/scss/layout/_page.scss +1 -0
  91. package/scss/layout/_root.scss +26 -34
  92. package/scss/marketing/_core.scss +1 -1
  93. package/scss/marketing/_pricing.scss +1 -1
  94. package/scss/mixins/_mixins.scss +6 -6
  95. package/scss/tabler-props.scss +1 -0
  96. package/scss/tabler-themes.scss +121 -0
  97. package/scss/tabler-vendors.scss +3 -1
  98. package/scss/tabler.scss +0 -1
  99. package/scss/ui/_accordion.scss +31 -26
  100. package/scss/ui/_alerts.scss +19 -8
  101. package/scss/ui/_avatars.scss +35 -9
  102. package/scss/ui/_badges.scss +1 -1
  103. package/scss/ui/_buttons.scss +15 -17
  104. package/scss/ui/_close.scss +55 -2
  105. package/scss/ui/_dropdowns.scss +1 -0
  106. package/scss/ui/_forms.scss +12 -2
  107. package/scss/ui/_markdown.scss +10 -1
  108. package/scss/ui/_nav.scss +11 -1
  109. package/scss/ui/_offcanvas.scss +1 -1
  110. package/scss/ui/_pagination.scss +2 -0
  111. package/scss/ui/_signature.scss +4 -2
  112. package/scss/ui/_steps.scss +4 -0
  113. package/scss/ui/_tables.scss +16 -0
  114. package/scss/ui/_tags.scss +1 -1
  115. package/scss/ui/_type.scss +69 -7
  116. package/scss/ui/forms/_form-colorinput.scss +1 -1
  117. package/scss/ui/forms/_form-imagecheck.scss +6 -5
  118. package/scss/ui/forms/_form-selectgroup.scss +1 -1
  119. package/scss/utils/_colors.scss +58 -11
  120. package/scss/utils/_scroll.scss +0 -2
  121. package/scss/vendor/_coloris.scss +6 -1
  122. package/scss/vendor/_fslightbox.scss +1 -1
  123. package/scss/vendor/_jsvectormap.scss +2 -3
  124. package/scss/vendor/_litepicker.scss +1 -0
  125. package/scss/vendor/_nouislider.scss +0 -2
  126. package/scss/vendor/_tinymce.scss +3 -3
  127. package/scss/vendor/_tom-select.scss +7 -4
  128. package/scss/vendor/_turbo.scss +3 -0
  129. package/scss/vendor/_wysiwyg.scss +34 -0
  130. package/docs/emails/index.mdx +0 -14
  131. package/docs/emails/introduction/compiled-html.mdx +0 -29
  132. package/docs/emails/introduction/contents.mdx +0 -63
  133. package/docs/emails/introduction/index.mdx +0 -9
  134. package/docs/emails/introduction/source-html.mdx +0 -26
  135. package/docs/icons/index.mdx +0 -13
  136. package/docs/icons/libraries/index.mdx +0 -5
  137. package/docs/icons/libraries/preact.mdx +0 -42
  138. package/docs/icons/libraries/react.mdx +0 -42
  139. package/docs/icons/libraries/solidjs.mdx +0 -42
  140. package/docs/icons/libraries/svelte.mdx +0 -43
  141. package/docs/icons/libraries/vue.mdx +0 -50
  142. package/docs/icons/libraries/webfont.mdx +0 -60
  143. package/docs/icons/plugins/figma.mdx +0 -15
  144. package/docs/icons/plugins/index.mdx +0 -4
  145. package/docs/icons/static-files/eps.mdx +0 -15
  146. package/docs/icons/static-files/index.mdx +0 -5
  147. package/docs/icons/static-files/pdf.mdx +0 -15
  148. package/docs/icons/static-files/png.mdx +0 -31
  149. package/docs/icons/static-files/svg.mdx +0 -85
  150. package/docs/illustrations/index.mdx +0 -8
  151. package/docs/illustrations/introduction/contents.mdx +0 -77
  152. package/docs/illustrations/introduction/customization.mdx +0 -1198
  153. package/docs/illustrations/introduction/index.mdx +0 -5
  154. package/docs/illustrations/introduction/license.mdx +0 -90
  155. package/docs/img/browsers/brave.svg +0 -1
  156. package/docs/img/browsers/chrome.svg +0 -1
  157. package/docs/img/browsers/edge.svg +0 -1
  158. package/docs/img/browsers/electron.svg +0 -1
  159. package/docs/img/browsers/firefox.svg +0 -1
  160. package/docs/img/browsers/internet-explorer.svg +0 -1
  161. package/docs/img/browsers/opera.svg +0 -1
  162. package/docs/img/browsers/safari.svg +0 -1
  163. package/docs/img/browsers/vivaldi.svg +0 -1
  164. package/docs/img/cover-illustrations-dark.png +0 -0
  165. package/docs/img/cover-illustrations.png +0 -0
  166. package/docs/img/cover-tabler-dark.png +0 -0
  167. package/docs/img/cover-tabler.png +0 -0
  168. package/docs/img/icons/figma-plugin.png +0 -0
  169. package/docs/img/icons/package-angular-dark.png +0 -0
  170. package/docs/img/icons/package-angular.png +0 -0
  171. package/docs/img/icons/package-eps-dark.png +0 -0
  172. package/docs/img/icons/package-eps.png +0 -0
  173. package/docs/img/icons/package-js-dark.png +0 -0
  174. package/docs/img/icons/package-js.png +0 -0
  175. package/docs/img/icons/package-pdf-dark.png +0 -0
  176. package/docs/img/icons/package-pdf.png +0 -0
  177. package/docs/img/icons/package-png-dark.png +0 -0
  178. package/docs/img/icons/package-png.png +0 -0
  179. package/docs/img/icons/package-preact-dark.png +0 -0
  180. package/docs/img/icons/package-preact.png +0 -0
  181. package/docs/img/icons/package-react-dark.png +0 -0
  182. package/docs/img/icons/package-react-native-dark.png +0 -0
  183. package/docs/img/icons/package-react-native.png +0 -0
  184. package/docs/img/icons/package-react.png +0 -0
  185. package/docs/img/icons/package-solidjs-dark.png +0 -0
  186. package/docs/img/icons/package-solidjs.png +0 -0
  187. package/docs/img/icons/package-sprite-dark.png +0 -0
  188. package/docs/img/icons/package-sprite.png +0 -0
  189. package/docs/img/icons/package-svelte-dark.png +0 -0
  190. package/docs/img/icons/package-svelte.png +0 -0
  191. package/docs/img/icons/package-svg-dark.png +0 -0
  192. package/docs/img/icons/package-svg.png +0 -0
  193. package/docs/img/icons/package-vue-dark.png +0 -0
  194. package/docs/img/icons/package-vue.png +0 -0
  195. package/docs/img/icons/package-webfont-dark.png +0 -0
  196. package/docs/img/icons/package-webfont.png +0 -0
  197. package/docs/index.mdx +0 -16
  198. package/docs/ui/base/colors.mdx +0 -83
  199. package/docs/ui/base/index.mdx +0 -6
  200. package/docs/ui/base/typography.mdx +0 -311
  201. package/docs/ui/components/alerts.mdx +0 -406
  202. package/docs/ui/components/autosize.mdx +0 -25
  203. package/docs/ui/components/avatars.mdx +0 -227
  204. package/docs/ui/components/badges.mdx +0 -112
  205. package/docs/ui/components/breadcrumb.mdx +0 -199
  206. package/docs/ui/components/buttons.mdx +0 -1213
  207. package/docs/ui/components/cards.mdx +0 -417
  208. package/docs/ui/components/carousel.mdx +0 -459
  209. package/docs/ui/components/charts.mdx +0 -697
  210. package/docs/ui/components/countup.mdx +0 -165
  211. package/docs/ui/components/datagrid.mdx +0 -120
  212. package/docs/ui/components/divider.mdx +0 -68
  213. package/docs/ui/components/dropdowns.mdx +0 -302
  214. package/docs/ui/components/dropzone.mdx +0 -88
  215. package/docs/ui/components/empty.mdx +0 -149
  216. package/docs/ui/components/icons.mdx +0 -392
  217. package/docs/ui/components/index.mdx +0 -6
  218. package/docs/ui/components/inline-player.mdx +0 -58
  219. package/docs/ui/components/modals.mdx +0 -297
  220. package/docs/ui/components/offcanvas.mdx +0 -70
  221. package/docs/ui/components/placeholder.mdx +0 -273
  222. package/docs/ui/components/popover.mdx +0 -142
  223. package/docs/ui/components/progress.mdx +0 -241
  224. package/docs/ui/components/range-slider.mdx +0 -32
  225. package/docs/ui/components/ribbons.mdx +0 -207
  226. package/docs/ui/components/segmented-control.mdx +0 -401
  227. package/docs/ui/components/spinners.mdx +0 -135
  228. package/docs/ui/components/statuses.mdx +0 -322
  229. package/docs/ui/components/steps.mdx +0 -174
  230. package/docs/ui/components/switch-icon.mdx +0 -386
  231. package/docs/ui/components/tables.mdx +0 -397
  232. package/docs/ui/components/tabs.mdx +0 -396
  233. package/docs/ui/components/timelines.mdx +0 -697
  234. package/docs/ui/components/tinymce.mdx +0 -46
  235. package/docs/ui/components/toasts.mdx +0 -126
  236. package/docs/ui/components/tooltips.mdx +0 -65
  237. package/docs/ui/components/tracking.mdx +0 -548
  238. package/docs/ui/components/vector-maps.mdx +0 -166
  239. package/docs/ui/forms/form-color-check.mdx +0 -220
  240. package/docs/ui/forms/form-elements.mdx +0 -632
  241. package/docs/ui/forms/form-fieldset.mdx +0 -45
  242. package/docs/ui/forms/form-helpers.mdx +0 -91
  243. package/docs/ui/forms/form-image-check.mdx +0 -213
  244. package/docs/ui/forms/form-input-mask.mdx +0 -61
  245. package/docs/ui/forms/form-selectboxes.mdx +0 -398
  246. package/docs/ui/forms/form-validation.mdx +0 -62
  247. package/docs/ui/forms/index.mdx +0 -6
  248. package/docs/ui/getting-started/browser-support.mdx +0 -28
  249. package/docs/ui/getting-started/customize.mdx +0 -28
  250. package/docs/ui/getting-started/download.mdx +0 -44
  251. package/docs/ui/getting-started/faq.mdx +0 -30
  252. package/docs/ui/getting-started/how-to-contribute.mdx +0 -84
  253. package/docs/ui/getting-started/index.mdx +0 -16
  254. package/docs/ui/getting-started/installation.mdx +0 -67
  255. package/docs/ui/getting-started/license.mdx +0 -30
  256. package/docs/ui/index.mdx +0 -8
  257. package/docs/ui/layout/index.mdx +0 -6
  258. package/docs/ui/layout/navbars.mdx +0 -164
  259. package/docs/ui/layout/navs-tabls.mdx +0 -201
  260. package/docs/ui/layout/page-headers.mdx +0 -365
  261. package/docs/ui/layout/page-layouts.mdx +0 -213
  262. package/docs/ui/plugins/flags.mdx +0 -316
  263. package/docs/ui/plugins/index.mdx +0 -6
  264. package/docs/ui/plugins/payments.mdx +0 -152
  265. package/docs/ui/plugins/social-icons.mdx +0 -135
  266. package/docs/ui/utilities/borders.mdx +0 -260
  267. package/docs/ui/utilities/cursors.mdx +0 -63
  268. package/docs/ui/utilities/index.mdx +0 -5
  269. package/docs/ui/utilities/interactions.mdx +0 -26
  270. package/docs/ui/utilities/margins.mdx +0 -234
  271. package/docs/ui/utilities/vertical-align.mdx +0 -66
  272. package/docs/ui/utilities/visually-hidden.mdx +0 -12
  273. 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
- ![](/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
-
@@ -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
- ![](/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 |
@@ -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
- ![](/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_ | |
@@ -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
- ![](/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
-
@@ -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
- ![](/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
- ```
@@ -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
- ![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>
@@ -1,4 +0,0 @@
1
- ---
2
- title: Plugins
3
- description: Icon plugins for seamless integration.
4
- ---
@@ -1,15 +0,0 @@
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.
@@ -1,5 +0,0 @@
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
- ---
@@ -1,15 +0,0 @@
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.
@@ -1,31 +0,0 @@
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.
@@ -1,85 +0,0 @@
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.
@@ -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
- ![](/docs/cover-illustrations.png)
@@ -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.