PubIcon

This is a icon component that displays a vector graphic icon.

Scale

The icon can be scaled using the size prop.

<template>
    <pub-icon name="times" size="xs" title="Extra Small"/>
    <pub-icon name="times" size="sm" title="Small"/>
    <pub-icon name="times" size="md" title="Medium"/>
    <pub-icon name="times" size="xl" title="Extra Large"/>
    <pub-icon name="times" size="2xl" title="Double Extra Large"/>
</template>

<script setup>
import { PubIcon } from "vuelicity";
</script>

Theme

The icon can be themed using the theme prop.

<template>
    <pub-icon name="times" theme="green" />
    <pub-icon name="times" theme="red" />
    <pub-icon name="times" theme="blue" />
    <pub-icon name="times" theme="yellow" />
    <pub-icon name="times" theme="magenta" />
    <pub-icon name="times" theme="cyan" />
    <pub-icon name="times" theme="light" />
    <pub-icon name="times" theme="dark" />
</template>

<script setup>
import { PubIcon } from "vuelicity";
</script>

Spin, Flip, Rotate, and Mirror

The icon can be animated or transformed.

<template>
    <pub-icon name="check" />
    <pub-icon name="check" flip />
    <pub-icon name="check" rotate />
    <pub-icon name="check" spin />
    <pub-icon name="check" mirror />
</template>

<script setup>
import { PubIcon } from "vuelicity";
</script>

Reference

Properties

Name	Type	Default	Description	Options
size	String	'md'	The size of the icon.	'xs', 'sm', 'md', 'lg', 'xl'
theme	String	'default'	The color theme of the icon.	'default', 'blue', 'red', 'yellow', 'green', 'magenta', 'cyan', 'light', 'dark'
name	String	''	The name of the icon.	Refer to the icon list below.
rotate	Boolean	false	Whether to rotate the icon 90 degrees.
flip	Boolean	false	Whether to flip the icon horizontally.
spin	Boolean	false	Whether to spin the icon.
pulse	Boolean	false	Whether to pulse the icon.
class	String	''	Additional CSS classes to apply.

Icons

close

close_circle

alert

alert_circle

check

check_circle

info

info_circle

plus

plus_circle

minus

minus_circle

cart

love

eye

user

user_circle

folder

home

sun

moon

bars

chevron_left

chevron_right

chevron_up

chevron_down

chevron_double_left

chevron_double_right

chevron_double_up

chevron_double_down

arrow_up

arrow_down

arrow_right

arrow_left

download

upload

bookmark