mirror of
https://github.com/tabler/tabler-icons.git
synced 2025-01-17 12:48:26 +01:00
69 lines
1.3 KiB
Plaintext
69 lines
1.3 KiB
Plaintext
|
---
|
||
|
|
title: SVG version
|
||
|
|
---
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## 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.
|
||
|
|
|
||
|
|
```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>
|
||
|
|
Click me
|
||
|
|
</a>
|
||
|
|
```
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## CDN
|
||
|
|
|
||
|
|
```html
|
||
|
|
<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/home.svg" />
|
||
|
|
```
|
||
|
|
|
||
|
|
### SVG sprite
|
||
|
|
|
||
|
|
See the [SVG sprite version](../icons/sprite)
|