mirror_html/tabler-icons
1
0
Fork 0
mirror of https://github.com/tabler/tabler-icons.git synced 2025-08-31 01:30:04 +02:00
Code Issues Releases Wiki Activity

Improved docs + remove clash props and SVG attribute stroke (#841)

Browse Source
This commit is contained in:
Luca Sabato
2023-09-27 19:26:24 +01:00
committed by GitHub
parent 5ee72f166c
commit 8c694f6a38
3 changed files with 55 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

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

31
packages/icons-vue/README.md
View File

@@ -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

4
packages/icons-vue/src/createVueComponent.js
View File

@@ -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,