packages/icons-vue/README.md
If you want to support my project and help me grow it, you can become a sponsor on GitHub or just donate on PayPal :)
<a href="https://github.com/sponsors/codecalm"> </a>yarn add @tabler/icons-vue
or
npm install @tabler/icons-vue
or
pnpm install @tabler/icons-vue
or just download from Github.
All icons are Vue components that contain SVG elements. So any icon can be imported and used as a component. It also helps to use threeshaking, so you only import the icons you use.
<template>
<!-- basic usage -->
<IconHome />
<!-- set `stroke` color -->
<IconHome color="red"/>
<IconHome stroke="red"/>
<!-- set custom `width` and `height` -->
<IconHome size="36"/>
<!-- set `stroke-width` -->
<IconHome strokeWidth="2"/>
<IconHome stroke-width="2"/>
</template>
<script>
// Returns Vue component
import { IconHome } from '@tabler/icons-vue';
export default {
components: { IconHome }
};
</script>
or with <script setup>
<script setup>
// Import Vue component
import { IconHome } from '@tabler/icons-vue';
</script>
<template>
<IconHome color="red" size="36" strokeWidth="2"/>
</template>
You can pass additional attribute stroke-width="1" alongside the props to adjust the icon.
<IconHome color="red" size="48" stroke-width="1" />
| name | type | default |
|---|---|---|
size | Number | 24 |
color | String | currentColor |
strokeWidth | Number | 2 |
For more info on how to contribute please see the contribution guidelines.
Caught a mistake or want to contribute to the documentation? Edit this page on Github
Tabler Icons is licensed under the MIT License.
<a href="https://github.com/sponsors/codecalm" target="_blank"></a>