blob: 332f89117a21c83e5dfa7e1f9512eb911e117768 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
# Tabler Icons
A set of over 850 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a `2px` stroke.
**If you want to support my project and help me grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm) or just [donate on PayPal](https://paypal.me/codecalm) :)**
## Preview
## Installation
```
npm install tabler-icons --save
```
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;
}
```
### 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>
```
### React
Import the icon and render it in your component. You can adjust SVG properties through React props:
```jsx
import { IconAward } from 'tabler-icons';
const MyComponent = () => {
return <IconAward
size={36} // set custom `width` and `height`
color="red" // set `stroke` color
stroke={3} // set `stroke-width`
strokeLinejoin="miter" // override other SVG props
/>
}
```
`tabler-icons` exports it's own type declarations for usage with React and Typescript.
## Multiple strokes
All icons in this repository have been created with the value of the `stroke-width` property, so if you change the value, you can get different icon variants that will fit in well with your design.
## License
Tabler Icons is licensed under the [MIT License](https://github.com/tabler/tabler-icons/blob/master/LICENSE).
|
