mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 21:31:28 +04:00
Render docs pages from a content collection instead of file routing (#2849)
This commit is contained in:
Paweł Kuna
@@ -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