wt-icon.vue

See also:

• Icons List

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
icon	✅	string	-	Icon name	'<wt-icon icon="close"></wt-icon>'
iconPrefix		string	''
size		ComponentSize	ComponentSize.MD
color		IconColor	IconColor.DEFAULT
disabled		boolean	false

Events

Name	Params	Description
click

Example Icon Different Colors

Code

<template>
    <div style="display: flex; gap: var(--spacing-xs);">
        <wt-icon
            v-for="color in colors"
            :style="color === IconColor.ON_DARK ? 'background-color: var(--grey-darken-1);' : ''"
            :key="color"
            :color="color"
            icon="edit"
        />
    </div>
</template>

<script setup>
import { IconColor } from '../../../../../../../src/enums';

const colors = Object.values(IconColor);
</script>

Example Icon Different Sizes

Code

<template>
    <div style="display: flex; gap: var(--spacing-xs);">
        <wt-icon
            v-for="size in sizes"
            :key="size"
            :size="size"
            icon="edit"
        />
    </div>
</template>

<script setup>
import { ComponentSize } from '../../../../../../../src/enums';

const sizes = Object.values(ComponentSize).reverse();
</script>