diff --git a/README.md b/README.md
index d11dfd3e7..c509c2041 100644
--- a/README.md
+++ b/README.md
@@ -122,7 +122,19 @@ Vue components available through [`@tabler/icons-vue`](https://www.npmjs.com/pac
 
 ```vue
 <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>
@@ -135,6 +147,19 @@ export default {
 </script>
 ```
 
+or with `<script setup>`
+
+```vue
+<script setup>
+// Import Vue component
+import { IconHome } from '@tabler/icons-vue';
+</script>
+
+<template>
+  <IconHome color="red" size="36" strokeWidth="2"/>
+</template>
+```
+
 For more details, see the [documentation](https://github.com/tabler/tabler-icons/tree/master/packages/icons-vue).
 
 
diff --git a/packages/icons-vue/README.md b/packages/icons-vue/README.md
index 7466513d6..33626fd72 100644
--- a/packages/icons-vue/README.md
+++ b/packages/icons-vue/README.md
@@ -52,7 +52,19 @@ All icons are Vue components that contain SVG elements. So any icon can be impor
 
 ```vue
 <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>
@@ -65,10 +77,23 @@ export default {
 </script>
 ```
 
-You can pass additional props to adjust the icon.
+or with `<script setup>`
+
+```vue
+<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.
 
 ```html
-<IconHome color="red" :size="48" stroke-width="1" />
+<IconHome color="red" size="48" stroke-width="1" />
 ```
 
 ### Props
@@ -77,7 +102,7 @@ You can pass additional props to adjust the icon.
 | ------------- | -------- | ------------ |
 | `size`        | _Number_ | 24           |
 | `color`       | _String_ | currentColor |
-| `stroke`      | _Number_ | 2            |
+| `strokeWidth` | _Number_ | 2            |
 
 ## Contributing
 
diff --git a/packages/icons-vue/src/createVueComponent.js b/packages/icons-vue/src/createVueComponent.js
index 00989a94c..baa74cd38 100644
--- a/packages/icons-vue/src/createVueComponent.js
+++ b/packages/icons-vue/src/createVueComponent.js
@@ -2,7 +2,7 @@ import { h } from 'vue';
 import defaultAttributes from './defaultAttributes';
 
 const createVueComponent = (iconName, iconNamePascal, iconNode) => (
-    { size, color, stroke, ...props },
+    { size, color, strokeWidth, ...props },
     { attrs, slots }
 ) => {
   return h(
@@ -12,7 +12,7 @@ const createVueComponent = (iconName, iconNamePascal, iconNode) => (
         width: size || defaultAttributes.width,
         height: size || defaultAttributes.height,
         stroke: color || defaultAttributes.stroke,
-        strokeWidth: stroke || defaultAttributes['stroke-width'],
+        'stroke-width': strokeWidth || defaultAttributes['stroke-width'],
         ...attrs,
         class: ['tabler-icon', `tabler-icon-${iconName}`, attrs?.class || ''],
         ...props,