Riupress UI

Appearance

HeroIcon ​

It is a component closing the icon from the circle and or a square used to visually highlight the message in interface elements such as Modal.

Props ​

type
Heroicon type
type:String
default:color
values:color, outline
color
Color from the Tailwind palette
type:String
default:current
values:current, primary, secondary, warning, info, success, danger
size
Heroicon size
type:String
default:md
values:xs, sm, md, lg, xl
border
Is it supposed to have a border
type:Boolean
default:true
square
Whether it is in the shape of a circle or a square
type:Boolean
default:false
transparent
Is it transparent
type:Boolean
default:false

Examples ​

Sizes (type: outline)
xs
sm
md
lg
xl
html
<hero-icon size="xs" color="primary" type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon size="sm" color="primary" type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon size="md" color="primary" type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon size="lg" color="primary" type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon size="xl" color="primary" type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
Colors (typy: outline)
current
primary
secondary
success
info
warning
danger
html
<hero-icon type="outline">
  <icon size="full" />
</hero-icon>
html
<hero-icon color="primary" type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon color="secondary" type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon color="success" type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon color="info" type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon color="warning" type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon color="danger" type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
Shape and transparency
square
transparency
html
<hero-icon color="primary" square type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon color="primary" square transparent type="outline">
  <icon size="full" :icon="times" />
</hero-icon>
Sizes
xs
sm
md
lg
xl
html
<hero-icon size="xs" color="primary">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon size="sm" color="primary">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon size="md" color="primary">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon size="lg" color="primary">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon size="xl" color="primary">
  <icon size="full" :icon="times" />
</hero-icon>
Colors
primary
secondary
success
info
warning
danger
html
<hero-icon>
  <icon size="full" />
</hero-icon>
html
<hero-icon color="primary">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon color="secondary">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon color="success">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon color="info">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon color="warning">
  <icon size="full" :icon="times" />
</hero-icon>
html
<hero-icon color="danger">
  <icon size="full" :icon="times" />
</hero-icon>

WARNING

The icon inserted into Heroicon must have a defined value for size="full", because it will then be correctly scaled to the component.