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 lang="ts" setup>
import { PubIcon } from 'vuelicity'
</script>

Colored Icons

Prop - color Usage

The icon can be colored using the color prop.

<template>
  <pub-icon
    name="times"
    color="green"
  />
  <pub-icon
    name="times"
    color="red"
  />
  <pub-icon
    name="times"
    color="blue"
  />
  <pub-icon
    name="times"
    color="yellow"
  />
  <pub-icon
    name="times"
    color="pink"
  />
  <pub-icon
    name="times"
    color="cyan"
  />
  <pub-icon
    name="times"
    color="purple"
  />
  <pub-icon
    name="times"
    color="grey"
  />
</template>

<script lang="ts" setup>
import { PubIcon } from 'vuelicity'
</script>

Spin, Flip, Rotate, and Mirror

Props - spin, flip, rotate, and mirror Usage

The icon can be rotated, flipped, spun, and mirrored using the spin, flip, rotate, and mirror props.

<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 lang="ts" 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'
color	String	'default'	The color color of the icon.	'default', 'blue', 'red', 'yellow', 'green', 'grey', 'cyan', 'pink', 'purple'
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

Please select oneSolidOutline

close

close_circle

alert

alert_circle

check

check_circle

info

info_circle

plus

plus_circle

minus

minus_circle

cart

love

folder

envelope

search

grid

attachment

location

image

address_book

shopping_bag

home

star

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