mirror of
https://github.com/tabler/tabler.git
synced 2026-10-13 05:37:04 +04:00
77 lines
2.1 KiB
Plaintext
77 lines
2.1 KiB
Plaintext
---
|
|
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 { Code } from 'astro:components'
|
|
import { site } from '@shared/lib/site.ts'
|
|
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
|
|
|
|
When you load an icon as an image, set its size with CSS.
|
|
|
|
```html
|
|
<img src="path/to/icon.svg" alt="icon title" />
|
|
```
|
|
|
|
### Inline HTML
|
|
|
|
Paste the content of the SVG file into your HTML to render it inline.
|
|
|
|
<Example codeOnly>
|
|
<a href=""> <Icon name="disabled" inline /> Click me </a>
|
|
</Example>
|
|
|
|
Inline SVG picks up CSS, so you can set the size, the color and the `stroke-width` from your stylesheet.
|
|
|
|
```css
|
|
.icon-tabler {
|
|
color: red;
|
|
width: 32px;
|
|
height: 32px;
|
|
stroke-width: 1.25;
|
|
}
|
|
```
|
|
|
|
### SVG sprite
|
|
|
|
Reference an icon from the sprite with `use`. Replace `activity` with any 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:
|
|
|
|
<Code lang="html" code={`<img src="https://unpkg.com/@tabler/icons@${site.iconsVersion}/icons/outline/home.svg" />`} />
|
|
|
|
### Filled version
|
|
|
|
Use the `icons/filled` path to load the filled version of an icon:
|
|
|
|
<Code lang="html" code={`<img src="https://unpkg.com/@tabler/icons@${site.iconsVersion}/icons/filled/home.svg" />`} />
|
|
|
|
Swap the version for `latest` to always pull the newest icons, or keep it pinned so the set stays stable.
|