From 280acea4ab1dc6b7590051866e704750ae0b6578 Mon Sep 17 00:00:00 2001 From: codecalm Date: Tue, 10 Mar 2020 23:30:00 +0100 Subject: readme --- readme.md | 47 ++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 40 insertions(+), 7 deletions(-) (limited to 'readme.md') diff --git a/readme.md b/readme.md index be6a859e..e8e62854 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 ``, `background-image` and inline in HTML code. +### HTML image + +If you load the icon as an image you can manipulate size with CSS. + +```html +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 - ... - Click me + + ... + + Click me ``` +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 + + + +``` + ## 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) -- cgit v1.2.1