aboutsummaryrefslogtreecommitdiff
path: root/README.md
diff options
context:
space:
mode:
authorcodecalm <codecalm@gmail.com>2020-03-15 18:12:50 +0100
committercodecalm <codecalm@gmail.com>2020-03-15 18:12:50 +0100
commitaa0b63e58cf770abbdb8b7c51a24a6eb869e00f1 (patch)
tree55e5fdfbd9e1ddf123af8ae20bff8701e975466c /README.md
parentnpm fix (diff)
downloadtabler-icons-aa0b63e58cf770abbdb8b7c51a24a6eb869e00f1.tar.xz
readme fix
Diffstat (limited to 'README.md')
-rw-r--r--README.md72
1 files changed, 72 insertions, 0 deletions
diff --git a/README.md b/README.md
new file mode 100644
index 00000000..389dbcde
--- /dev/null
+++ b/README.md
@@ -0,0 +1,72 @@
+# Tabler Icons
+
+A set of over 300 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.
+
+```
+npm install tabler-icons --save
+```
+
+## Preview
+
+![](./.github/icons.svg)
+
+
+## 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 tabler-icon tabler-icon-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>
+```
+
+## 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.
+
+![](./.github/icons-stroke.svg)
+
+## License
+
+Tabler Icons is licensed under the [MIT License](https://github.com/tabler/tabler-icons/blob/master/LICENSE).