@tabler/icons-vue
v3.3.0
Published
A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.
Downloads
29,879
Readme
Tabler Icons for Vue
Sponsors
If you want to support my project and help me grow it, you can become a sponsor on GitHub or just donate on PayPal :)
Installation
yarn add @tabler/icons-vue
or
npm install @tabler/icons-vue
or
pnpm install @tabler/icons-vue
or just download from Github.
How to use
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" />
Props
| name | type | default |
| ------------- | -------- | ------------ |
| size
| Number | 24 |
| color
| String | currentColor |
| strokeWidth
| Number | 2 |
Contributing
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
License
Tabler Icons is licensed under the MIT License.