mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 05:12:36 +04:00
Render docs pages from a content collection instead of file routing (#2849)
This commit is contained in:
Paweł Kuna
@@ -0,0 +1,16 @@
|
||||
---
|
||||
title: Tabler 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 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.
|
||||
order: 2
|
||||
description: Over 5000 pixel-perfect icons for web design and development
|
||||
---
|
||||
|
||||
import { site } from '@shared/lib/site'
|
||||
|
||||
Tabler Icons is a comprehensive icon library that features { site.iconsCount } high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
|
||||
|
||||
To use Tabler Icons, visit [tabler.io/icons](https://tabler.io/icons). 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](/icons/static-files/svg), [PNG](/icons/static-files/png), and [Icon Font](/icons/libraries/webfont).
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Astro
|
||||
description: Add Tabler Icons to Astro projects with the official tree-shakable package. Import any of over 5000 icons as native Astro components.
|
||||
summary: Tabler Icons for Astro provides an optimized collection of icons specifically designed for use with Astro. These lightweight and scalable icons are easy to integrate into Astro-based projects.
|
||||
---
|
||||
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-astro" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as an Astro component.
|
||||
|
||||
```astro
|
||||
---
|
||||
import { IconArrowDown } from '@tabler/icons-astro';
|
||||
---
|
||||
|
||||
<IconArrowDown />
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon. Any valid SVG attribute is forwarded to the rendered `<svg>` element.
|
||||
|
||||
```astro
|
||||
<IconArrowDown color="red" size={48} />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
All icon components accept these props to control the size, color, and stroke width of the rendered SVG:
|
||||
|
||||
| name | type | default |
|
||||
| -------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Libraries
|
||||
description: Official Tabler Icons libraries for React, Vue, Svelte, Angular and more. Use over 5000 icons as native components or a simple webfont.
|
||||
summary: The libraries section offers various integrations of Tabler Icons for popular frameworks and technologies, making it easy to incorporate icons into any project.
|
||||
---
|
||||
|
||||
Tabler Icons ships official libraries for the most popular frameworks. Pick the package for your stack and use icons as native components, with tree-shaking and full styling control. A [webfont](/icons/libraries/webfont) is also available if you prefer plain CSS classes.
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
title: Preact
|
||||
description: Add Tabler Icons to Preact apps with the official tree-shakable package. Import any of over 5000 lightweight SVG icons as components.
|
||||
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.
|
||||
---
|
||||
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-preact" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```js
|
||||
import { IconArrowDown } from '@tabler/icons-preact';
|
||||
|
||||
const App = () => {
|
||||
return <IconArrowDown />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```js
|
||||
<IconArrowDown color="red" size={48} />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
All icon components accept these props to control the size, color, and stroke width of the rendered SVG:
|
||||
|
||||
| name | type | default |
|
||||
| -------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
title: React
|
||||
description: Add Tabler Icons to React apps with the official tree-shakable package. Import over 5000 scalable SVG icons as customizable components.
|
||||
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.
|
||||
---
|
||||
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-react" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```jsx
|
||||
import { IconArrowLeft } from '@tabler/icons-react';
|
||||
|
||||
const App = () => {
|
||||
return <IconArrowLeft />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```js
|
||||
<IconArrowLeft color="red" size={48} />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
All icon components accept these props to control the size, color, and stroke width of the rendered SVG:
|
||||
|
||||
| name | type | default |
|
||||
| -------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: SolidJS
|
||||
description: Add Tabler Icons to SolidJS apps with the official tree-shakable package. Import over 5000 high-quality SVG icons as components.
|
||||
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.
|
||||
---
|
||||
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-solidjs" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```js
|
||||
import { IconArrowRight } from '@tabler/icons-solidjs';
|
||||
|
||||
const App = () => {
|
||||
return <IconArrowRight />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```js
|
||||
<IconArrowRight color="red" size={48} />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
All icon components accept these props to control the size, color, and stroke width of the rendered SVG:
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Svelte
|
||||
description: Add Tabler Icons to Svelte apps with the official tree-shakable package. Import over 5000 clean SVG icons as customizable components.
|
||||
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.
|
||||
---
|
||||
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-svelte" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```html
|
||||
<script lang="ts">
|
||||
import { IconHeart } from "@tabler/icons-svelte";
|
||||
</script>
|
||||
<main>
|
||||
<IconHeart />
|
||||
</main>
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```html
|
||||
<IconHeart size="{48}" stroke="{1}" />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
All icon components accept these props to control the size, color, and stroke width of the rendered SVG:
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
| `class` | _String_ | |
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Vue
|
||||
description: Add Tabler Icons to Vue apps with the official package. Import over 5000 SVG icons as Vue components with tree-shaking and full styling control.
|
||||
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.
|
||||
---
|
||||
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-vue" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
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.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<IconHome />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Returns Vue component
|
||||
import { IconHome } from '@tabler/icons-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconHome
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```html
|
||||
<IconHome color="red" :size="48" stroke-width="1" />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
All icon components accept these props to control the size, color, and stroke width of the rendered SVG:
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Webfont
|
||||
description: Use Tabler Icons as a webfont and add icons with simple CSS classes. A lightweight and scalable way to include over 5000 icons on any website.
|
||||
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.
|
||||
---
|
||||
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-webfont" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
### CDN
|
||||
|
||||
Link the stylesheet directly from a CDN if you do not want to install the package:
|
||||
|
||||
```html
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@$ICONS_VERSION/dist/tabler-icons.min.css"
|
||||
/>
|
||||
```
|
||||
|
||||
Instead of a specific version, you can use `latest` to always get the newest icons.
|
||||
|
||||
## Usage
|
||||
|
||||
### HTML
|
||||
|
||||
Add an icon with an `<i>` element. Use the `ti` base class together with a `ti-` class that names the icon:
|
||||
|
||||
```html
|
||||
<i class="ti ti-brand-tabler"></i>
|
||||
```
|
||||
|
||||
### CSS
|
||||
|
||||
Set the icon's character code in the `content` property of a pseudo-element to show an icon from CSS:
|
||||
|
||||
```css
|
||||
content: 'ec8f';
|
||||
```
|
||||
|
||||
|
||||
### SCSS
|
||||
|
||||
In SCSS, use the generated `$ti-icon-*` variables instead of raw character codes:
|
||||
|
||||
```scss
|
||||
content: $ti-icon-brand-tabler;
|
||||
```
|
||||
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: Figma plugin
|
||||
description: Use the Tabler Icons Figma plugin to insert over 5000 customizable icons directly into your designs without leaving 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.
|
||||
---
|
||||
|
||||
import DownloadButton from '@components/DownloadButton.astro'
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
<DownloadButton href="https://www.figma.com/community/plugin/1169807996149376642/Tabler-Icons" title="Download Plugin" />
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Plugins
|
||||
description: Bring Tabler Icons into your design tools with official plugins. Access the full, always up-to-date icon set right inside Figma.
|
||||
summary: Plugins bring Tabler Icons directly into your design tools, so you can use the full icon set without leaving your workflow.
|
||||
---
|
||||
|
||||
Use plugins to work with Tabler Icons inside your favorite design tools. The [Figma plugin](/icons/plugins/figma) gives you the full, always up-to-date icon set right on your canvas.
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
title: EPS version
|
||||
summary: Use the EPS files in print projects and vector editing tools that do not support SVG.
|
||||
description: Download Tabler Icons as EPS files for print projects and vector editing tools that do not support the SVG format.
|
||||
---
|
||||
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-eps" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
All EPS files are stored in `icons` subdirectory.
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Static files
|
||||
description: Download Tabler Icons as static files in SVG, PNG, EPS, and PDF formats. Pick the format that fits your design or development workflow.
|
||||
summary: Static files provide multiple formats of Tabler Icons, including EPS, PDF, PNG, and SVG, offering flexibility for different design and development workflows.
|
||||
---
|
||||
|
||||
Every Tabler icon is available as a set of static files. Download [SVG](/icons/static-files/svg) for the web, [PNG](/icons/static-files/png) for quick mockups, or [EPS](/icons/static-files/eps) and [PDF](/icons/static-files/pdf) for print and vector editing tools. Pick the format that fits your workflow.
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: PDF version
|
||||
summary: Use the PDF files in documents, presentations and print workflows.
|
||||
description: Download Tabler Icons as PDF files, ready to place in documents, presentations, and print workflows without conversion.
|
||||
---
|
||||
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-pdf" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
All PDF files are stored in `icons` subdirectory.
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: PNG version
|
||||
summary: Use the PNG files when you need raster icons for mockups, chats or tools without vector support.
|
||||
description: Download Tabler Icons as PNG files - raster images for mockups, chat apps, and tools that do not support vector formats.
|
||||
---
|
||||
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
### Outline version
|
||||
|
||||
Load the outline version of an icon as an image straight from the `icons/outline` directory of the CDN package:
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/outline/home.png" />
|
||||
```
|
||||
|
||||
### Filled version
|
||||
|
||||
Use the `icons/filled` path to load the filled version of an icon:
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/filled/home.png" />
|
||||
```
|
||||
|
||||
Instead of a specific version, you can use `latest` to always get the newest icons.
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
title: SVG version
|
||||
summary: Use the SVG files for the web - they scale without quality loss and are easy to style.
|
||||
description: Download Tabler Icons as SVG files that scale without quality loss. Use them as images, backgrounds, or inline elements on the web.
|
||||
---
|
||||
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## Usage
|
||||
|
||||
All icons are built with SVG, so you can place them as `<img>`, `background-image` and inline in HTML code.
|
||||
|
||||
### HTML image
|
||||
|
||||
If you load an icon as an image, you can modify its size using CSS.
|
||||
|
||||
```html
|
||||
<img src="path/to/icon.svg" alt="icon title" />
|
||||
```
|
||||
|
||||
### Inline HTML
|
||||
|
||||
You can paste the content of the icon file into your HTML code to display it on the page.
|
||||
|
||||
<Example codeOnly>
|
||||
<a href="">
|
||||
<Icon name="disabled" />
|
||||
Click me
|
||||
</a>
|
||||
</Example>
|
||||
|
||||
Thanks to that, you can change the size, color and the `stroke-width` of the icons with CSS code.
|
||||
|
||||
```css
|
||||
.icon-tabler {
|
||||
color: red;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
stroke-width: 1.25;
|
||||
}
|
||||
```
|
||||
|
||||
### SVG sprite
|
||||
|
||||
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):
|
||||
|
||||
```html
|
||||
<svg width="24" height="24">
|
||||
<use xlink:href="path/to/tabler-sprite.svg#tabler-activity" />
|
||||
</svg>
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
### Outline version
|
||||
|
||||
Load the outline version of an icon as an image straight from the `icons/outline` directory of the CDN package:
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/outline/home.svg" />
|
||||
```
|
||||
|
||||
### Filled version
|
||||
|
||||
Use the `icons/filled` path to load the filled version of an icon:
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/filled/home.svg" />
|
||||
```
|
||||
|
||||
Instead of a specific version, you can use `latest` to always get the newest icons.
|
||||
Reference in New Issue
Block a user