@tabler/core 1.0.0-beta22 → 1.0.0-beta23

package/docs/icons/index.mdx

@@ -1,100 +1,10 @@
 ---
 title: Tabler Icons
-description: 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 customisation 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.
+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 customisation 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.
+order: 2
+description: Over 5000 pixel-perfect icons for web design and development
 ---
 
-```html example centered separated
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-ghost" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7"></path>
-  <path d="M10 10l.01 0"></path>
-  <path d="M14 10l.01 0"></path>
-  <path d="M10 14a3.5 3.5 0 0 0 4 0"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-yin-yang" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
-  <path d="M12 3a4.5 4.5 0 0 0 0 9a4.5 4.5 0 0 1 0 9"></path>
-  <circle cx="12" cy="7.5" r=".5" fill="currentColor"></circle>
-  <circle cx="12" cy="16.5" r=".5" fill="currentColor"></circle>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
-</svg>
-```
-
-## Customize stroke
-
-The `stroke-width` property is a powerful tool for customizing icons. This property allows you to control the thickness of the stroke used to outline an icon, giving you precise control over its appearance. By adjusting the `stroke-width` property, you can make an icon more or less prominent, change its emphasis, or create unique visual effects. For example, a thinner stroke may be ideal for icons with intricate designs or fine details, while a thicker stroke can add visual weight and impact to simpler, bolder icons.
-
-All icons are designed by default with `2px` stroke.
-
-```html example centered separated
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 1">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
-  <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-  <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
-  <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
-  <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 1.5">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
-  <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-  <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
-  <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
-  <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 2">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
-  <path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-  <path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
-  <path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
-  <path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
-</svg>
-```
-
-```html
-<svg stroke-width="1" ...>
-   ...
-</svg>
-<svg stroke-width="1.5" ...>
-   ...
-</svg>
-<svg stroke-width="2" ...>
-   ...
-</svg>
-```
-
-## Filled version of icons
-
-```html example centered separated
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-bell-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z" stroke-width="0" fill="currentColor"></path>
-  <path d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z" stroke-width="0" fill="currentColor"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-diamond-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M18 4a1 1 0 0 1 .783 .378l.074 .108l3 5a1 1 0 0 1 -.032 1.078l-.08 .103l-8.53 9.533a1.7 1.7 0 0 1 -1.215 .51c-.4 0 -.785 -.14 -1.11 -.417l-.135 -.126l-8.5 -9.5a1 1 0 0 1 -.172 -1.067l.06 -.115l3.013 -5.022l.064 -.09a.982 .982 0 0 1 .155 -.154l.089 -.064l.088 -.05l.05 -.023l.06 -.025l.109 -.032l.112 -.02l.117 -.005h12zm-8.886 3.943a1 1 0 0 0 -1.371 .343l-.6 1l-.06 .116a1 1 0 0 0 .177 1.07l2 2.2l.09 .088a1 1 0 0 0 1.323 -.02l.087 -.09a1 1 0 0 0 -.02 -1.323l-1.501 -1.65l.218 -.363l.055 -.103a1 1 0 0 0 -.398 -1.268z" stroke-width="0" fill="currentColor"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-discount-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
-</svg>
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-shield-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M11.998 2l.118 .007l.059 .008l.061 .013l.111 .034a.993 .993 0 0 1 .217 .112l.104 .082l.255 .218a11 11 0 0 0 7.189 2.537l.342 -.01a1 1 0 0 1 1.005 .717a13 13 0 0 1 -9.208 16.25a1 1 0 0 1 -.502 0a13 13 0 0 1 -9.209 -16.25a1 1 0 0 1 1.005 -.717a11 11 0 0 0 7.531 -2.527l.263 -.225l.096 -.075a.993 .993 0 0 1 .217 -.112l.112 -.034a.97 .97 0 0 1 .119 -.021l.115 -.007zm3.71 7.293a1 1 0 0 0 -1.415 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
-</svg>
-```
-
 ## Browse icons
 
 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.

package/docs/icons/libraries/index.mdx

@@ -0,0 +1,5 @@
+---
+title: Libraries
+description: Explore Tabler Icons libraries.
+summary: The libraries section offers various integrations of Tabler Icons for popular frameworks and technologies, making it easy to incorporate icons into any project.
+---

package/docs/icons/{preact.mdx → libraries/preact.mdx}

@@ -1,8 +1,10 @@
 ---
-title: Tabler Icons for Preact
+title: Preact
+description: Tabler Icons library for Preact framework.
+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.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-preact.png)
+![](/docs/icons/package-preact.png)
 
 ## Installation
 

package/docs/icons/{react.mdx → libraries/react.mdx}

@@ -1,8 +1,10 @@
 ---
-title: Tabler Icons for React
+title: React
+description: Tabler Icons library for React framework.
+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.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-react.png)
+![](/docs/icons/package-react.png)
 
 ## Installation
 
@@ -14,7 +16,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
 
 It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
 
-```js
+```jsx
 import { IconArrowLeft } from '@tabler/icons-react';
 
 const App = () => {

package/docs/icons/{solidjs.mdx → libraries/solidjs.mdx}

@@ -1,8 +1,11 @@
 ---
-title: Tabler Icons for SolidJS
+title: SolidJS
+description: Tabler Icons library for SolidJS framework.
+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.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-solidjs.png)
+![](/docs/icons/package-solidjs.png)
+
 
 ## Installation
 

package/docs/icons/{svelte.mdx → libraries/svelte.mdx}

@@ -1,8 +1,11 @@
 ---
-title: Tabler Icons for Svelte
+title: Svelte
+description: Tabler Icons library for Svelte framework.
+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.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svelte.png)
+![](/docs/icons/package-svelte.png)
+
 
 ## Installation
 

package/docs/icons/{vue.mdx → libraries/vue.mdx}

@@ -1,8 +1,11 @@
 ---
-title: Tabler Icons for Vue
+title: Vue
+description: Tabler Icons library for Vue framework.
+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.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-vue.png)
+![](/docs/icons/package-vue.png)
+
 
 ## Installation
 
@@ -20,12 +23,14 @@ All icons are Vue components that contain SVG elements. So any icon can be impor
 </template>
 
 <script>
-// Returns Vue component
-import { IconHome } from '@tabler/icons-vue';
-
-export default {
-  components: { IconHome }
-};
+  // Returns Vue component
+  import { IconHome } from '@tabler/icons-vue';
+
+  export default {
+    components: {
+      IconHome
+    }
+  };
 </script>
 ```
 

package/docs/icons/{webfont.mdx → libraries/webfont.mdx}

@@ -1,8 +1,11 @@
 ---
 title: Webfont
+description: Tabler Icons as a webfont.
+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.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-webfont.png)
+![](/docs/icons/package-webfont.png)
+
 
 ## Installation
 

package/docs/icons/plugins/figma.mdx

@@ -0,0 +1,15 @@
+---
+title: Figma plugin
+description: Use Tabler Icons directly in Figma.
+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.
+---
+
+![Tabler Figma Plugin](/docs/icons/figma-plugin.png)
+
+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.
+
+## Usage 
+
+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.
+
+<BlogButton href="https://www.figma.com/community/plugin/1169807996149376642/Tabler-Icons">Download Plugin</BlogButton>

package/docs/icons/plugins/index.mdx

@@ -0,0 +1,4 @@
+---
+title: Plugins
+description: Icon plugins for seamless integration.
+---

package/docs/icons/{eps.mdx → static-files/eps.mdx}

@@ -1,8 +1,10 @@
 ---
 title: EPS version
+description: Download Tabler Icons in EPS format.	
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-eps.png)
+![](/docs/icons/package-eps.png)
+
 
 ## Installation
 

package/docs/icons/static-files/index.mdx

@@ -0,0 +1,5 @@
+---
+title: Static files
+description: Download static file formats of icons.
+summary: Static files provide multiple formats of Tabler Icons, including EPS, PDF, PNG, and SVG, offering flexibility for different design and development workflows.
+---

package/docs/icons/{pdf.mdx → static-files/pdf.mdx}

@@ -1,8 +1,10 @@
 ---
 title: PDF version
+description: Download Tabler Icons in PDF format.
 ---
 
-![Tabler icon and PDF icon merging with npm command to install](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-pdf.png)
+![](/docs/icons/package-pdf.png)
+
 
 ## Installation
 

package/docs/icons/static-files/png.mdx

@@ -0,0 +1,31 @@
+---
+title: PNG version
+description: Download Tabler Icons in PNG format.
+---
+
+![](/docs/icons/package-png.png)
+
+
+## Installation
+
+<TabsPackage name="@tabler/icons-png" />
+
+or just [download from Github](https://github.com/tabler/tabler-icons/releases).
+
+All PNG files are stored in `icons` subdirectory.
+
+## CDN
+
+Replace `$ICONS_VERSION` with `latest` or any specific version you need.
+
+#### Outline version
+
+```html
+<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/outline/home.png" />
+```
+
+#### Filled version
+
+```html
+<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/filled/home.png" />
+```

package/docs/icons/{svg.mdx → static-files/svg.mdx}

@@ -1,8 +1,9 @@
 ---
 title: SVG version
+description: Download Tabler Icons in SVG format.
 ---
 
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svg.png)
+![](/docs/icons/package-svg.png)
 
 ## Installation
 
@@ -28,18 +29,7 @@ You can paste the content of the icon file into your HTML code to display it on
 
 ```html
 <a href="">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="icon icon-tabler icon-tabler-disabled"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.25"
-    stroke="currentColor"
-    fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-disabled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     ...
   </svg>
   Click me
@@ -50,10 +40,10 @@ Thanks to that, you can change the size, color and the `stroke-width` of the ico
 
 ```css
 .icon-tabler {
-  color: red;
-  width: 32px;
-  height: 32px;
-  stroke-width: 1.25;
+color: red;
+width: 32px;
+height: 32px;
+stroke-width: 1.25;
 }
 ```
 
@@ -69,6 +59,16 @@ Add an icon to be displayed on your page with the following markup (`activity` i
 
 ## CDN
 
+Replace `$ICONS_VERSION` with `latest` or any specific version you need.
+
+#### Outline version
+
+```html
+<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/outline/home.svg" />
+```
+
+#### Filled version
+
 ```html
-<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/home.svg" />
+<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/filled/home.svg" />
 ```

package/docs/illustrations/index.mdx

@@ -0,0 +1,8 @@
+---
+title: Tabler Illustrations
+order: 3
+description: Customizable illustrations for modern web and mobile designs.
+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.
+---
+
+![](/docs/cover-illustrations.png)