aboutsummaryrefslogtreecommitdiff
path: root/readme.md
diff options
context:
space:
mode:
authorcodecalm <codecalm@gmail.com>2020-03-10 23:30:00 +0100
committercodecalm <codecalm@gmail.com>2020-03-10 23:30:00 +0100
commit280acea4ab1dc6b7590051866e704750ae0b6578 (patch)
tree52abaafe1fae551d8f2f74830b2169ce2ea542df /readme.md
parentreadme (diff)
downloadtabler-icons-280acea4ab1dc6b7590051866e704750ae0b6578.tar.xz
readme
Diffstat (limited to 'readme.md')
-rw-r--r--readme.md47
1 files changed, 40 insertions, 7 deletions
diff --git a/readme.md b/readme.md
index be6a859..e8e6285 100644
--- a/readme.md
+++ b/readme.md
@@ -15,22 +15,55 @@ npm install tabler-icons --save
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 the icon as an image you can manipulate size with CSS.
+
+```html
+<img src="path/to/icon.svg" alt="icon title"/>
+```
+
### Inline HTML
+You can paste the content of the icon file into the HTML code and it will be displayed 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
+ <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>
```
+In this way you can change size, color and `stroke-width` of the icon with CSS code.
+
+```css
+.icon-tabler {
+ color: red;
+ width: 32px;
+ height: 32px;
+ stroke-width: 1.25;
+}
+```
+
+### SVG sprite
+
+Include an icon 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#activity"/>
+</svg>
+```
+
## Multiple strokes
-All icons in this repository are drawn with the value of `stroke` property, so if you change its value you can get different variants of icon, that will fit into your project.
+All icons in this repository are drawn with the value of `stroke-width` property, so if you change its value you can get different variants of icon, that will fit into your project.
![Tabler icons](icons-stroke.svg)