Icon
Vuse provides a set of common icons.
Basic Usage
vue
<v-icon name="icon-name" />
Examples
Click the following icon to copy the component.
alert
arrow-down
arrow-left
arrow-right
arrow-up
blank
check-indeterminate
check
chevron-down
chevron-left
chevron-right
chevron-up
delete-alt
delete
filter
grab
hide
menu
overflow
plus
search
show
spinner
triangle-down
triangle-left
triangle-right
triangle-up
upload
Size
Size
Use the size attribute to customize the icon size. Use the title attribute to display the prompt text.
<template>
<div style="display: flex; align-items: center">
<v-icon name="alert" title="Alert1" :size="16" />
<v-icon name="alert" title="Alert2" :size="32" />
<v-icon name="alert" title="Alert3" :size="48" />
<v-icon name="alert" title="Alert4" :size="64" />
</div>
</template>
Color
Color
Use the color attribute to customize the icon color.
<template>
<div style="display: flex; align-items: center">
<v-icon name="upload" title="upload1" color="red" />
<v-icon name="upload" title="upload1" color="pink" />
<v-icon name="upload" title="upload2" color="rgb(0, 128, 0)" />
<v-icon name="upload" title="upload4" color="#333" />
</div>
</template>