svg.mdx 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. ---
  2. title: SVG version
  3. ---
  4. ![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svg.png)
  5. ## Installation
  6. <TabsPackage name="@tabler/icons" />
  7. or just [download from Github](https://github.com/tabler/tabler-icons/releases).
  8. ## Usage
  9. All icons are built with SVG, so you can place them as `<img>`, `background-image` and inline in HTML code.
  10. ### HTML image
  11. If you load an icon as an image, you can modify its size using CSS.
  12. ```html
  13. <img src="path/to/icon.svg" alt="icon title" />
  14. ```
  15. ### Inline HTML
  16. You can paste the content of the icon file into your HTML code to display it on the page.
  17. ```html
  18. <a href="">
  19. <svg
  20. xmlns="http://www.w3.org/2000/svg"
  21. class="icon icon-tabler icon-tabler-disabled"
  22. width="24"
  23. height="24"
  24. viewBox="0 0 24 24"
  25. stroke-width="1.25"
  26. stroke="currentColor"
  27. fill="none"
  28. stroke-linecap="round"
  29. stroke-linejoin="round"
  30. >
  31. ...
  32. </svg>
  33. Click me
  34. </a>
  35. ```
  36. Thanks to that, you can change the size, color and the `stroke-width` of the icons with CSS code.
  37. ```css
  38. .icon-tabler {
  39. color: red;
  40. width: 32px;
  41. height: 32px;
  42. stroke-width: 1.25;
  43. }
  44. ```
  45. ## CDN
  46. ```html
  47. <img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/home.svg" />
  48. ```
  49. ### SVG sprite
  50. See the [SVG sprite version](../icons/sprite)