diff options
author | Paweł Kuna <1282324+codecalm@users.noreply.github.com> | 2020-10-08 21:14:05 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-10-08 21:14:05 +0200 |
commit | fa480759bd45f06341dc8026f3fb0f981965200c (patch) | |
tree | 5617b40088a57a19c74b454d949bbba5d3b63c63 /README.md | |
parent | Release 1.33.0 (diff) | |
parent | [dev-icons-react-bundling] change svgr template to enable babel transformatio... (diff) | |
download | tabler-icons-fa480759bd45f06341dc8026f3fb0f981965200c.tar.xz |
Merge pull request #82 from tabler/dev-icons-react-bundling
React icons bundling for different usage types
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 19 |
1 files changed, 19 insertions, 0 deletions
@@ -73,6 +73,25 @@ Add an icon to be displayed on your page with the following markup (`activity` i </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. |