Merge branch 'master' of https://github.com/tabler/tabler-icons

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).
 
 

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
 

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,

src/_icons/exclamation-circle.svg

@@ -1,5 +1,5 @@
 ---
-tags: [warring, error, shape, caution, alert]
+tags: [warning, error, shape, caution, alert]
 unicode: "f634"
 version: "1.117"
 ---

tags.json

@@ -10649,7 +10649,7 @@
   "color-filter": {
     "name": "color-filter",
     "category": "Design",
-    "tags": ["color", "filter", "hue", "brightness", "effects", "sotring", "tools", "icon", "stroke", "outline"],
+    "tags": ["color", "filter", "hue", "brightness", "effects", "sorting", "tools", "icon", "stroke", "outline", "circles"],
     "version": "1.110",
     "unicode": "f5a8"
   },