Glyph(ui_glyph)Ui Bibz Logo

UiBibz::Ui::Core::Icons::Glyph

Icon component includes over 634 glyphs in font format from the fontawesome.io set (version 6.4.0).

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

# by variable
ui_glyph name, options, html_options

# or by block
ui_glyph options, html_options do
  content
end

# or by hash
ui_glyph options

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • flip[symbol](:horizontal, :vertical)
  • label[string]
  • name[string]
  • popover[string/hash](use component popover method)
  • rotate[number]
  • size[symbol](:lg, :md, :sm)(use component size method)
  • stack[integer]
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • style[symbol]
  • target[string](use component stimulus-options method)
  • tooltip[string/hash](use component tooltip method)
  • turbo[string](use component turbo method)

Examples

Some examples explain how to use the options present in the component.

Glyph

ui_glyph "gem"

<i class="glyph fa fa-gem"></i>

Size

The size can be be defined through the `size` option that has the following arguments :

  • :lg
  • :md
  • :sm
  • 1
  • 2
  • 3
  • 4
  • 5




ui_glyph "gem", size: :lg
ui_glyph "gem", size: :md
ui_glyph "gem", size: :sm
ui_glyph "gem", size: 1
ui_glyph "gem", size: 2
ui_glyph "gem", size: 3
ui_glyph "gem", size: 4
ui_glyph "gem", size: 5

<i class="glyph fa fa-gem fa-1x"></i>
<i class="glyph fa fa-gem fa-2x"></i>
<i class="glyph fa fa-gem fa-3x"></i>
<i class="glyph fa fa-gem fa-5x"></i>

Type

  • fw : fixed width icon
ui_glyph "gem", type: "fw"

<i class="glyph fa fa-gem fa-fw"></i>

status

The status option has following symbols for argument:
  • :primary
  • :secondary
  • :success
  • :danger
  • :warning
  • :info
  • :light
  • :dark
ui_glyph "gem", status: :primary
ui_glyph "gem", status: :secondary
ui_glyph "gem", status: :success
ui_glyph "gem", status: :danger
ui_glyph "gem", status: :warning
ui_glyph "gem", status: :info
ui_glyph "gem", status: :light
ui_glyph "gem", status: :dark

<i class="glyph-primary glyph fa fa-gem"></i>
<i class="glyph-secondary glyph fa fa-gem"></i>
<i class="glyph-success glyph fa fa-gem"></i>
<i class="glyph-danger glyph fa fa-gem"></i>
<i class="glyph-warning glyph fa fa-gem"></i>
<i class="glyph-info glyph fa fa-gem"></i>
<i class="glyph-light glyph fa fa-gem"></i>
<i class="glyph-dark glyph fa fa-gem"></i>

Rotate

ui_glyph "gem", rotate: 90
ui_glyph "gem", rotate: 180
ui_glyph "gem", rotate: 270

<i class="glyph fa fa-gem fa-rotate-90"></i>
<i class="glyph fa fa-gem fa-rotate-180"></i>
<i class="glyph fa fa-gem fa-rotate-270"></i>

Flip

ui_glyph "gem", flip: :horizontal
ui_glyph "gem", flip: :vertical

<i class="glyph fa fa-gem fa-flip-horizontal"></i>
<i class="glyph fa fa-gem fa-flip-vertical"></i>

Stack

ui_glyph "square", stack: 2
ui_glyph "gem", stack: 1, status: :danger

<i class="glyph fa fa-square fa-stack-2x"></i>
<i class="glyph-danger ui_glyph fa fa-gem fa-stack-1x"></i>

Label

gem 
ui_glyph "gem", label: 'gem'

<i class="glyph fa fa-gem"></i> gem

Style

  • :solid
  • :regular
  • :light
  • :brands
ui_glyph 'bluethooth', style: :brands

<i class="glyph fa fa-gem fa-1x"></i> gem

Hash

You can create a ui_glyph with only one hash.

gem 
ui_glyph { name: "gem", size: :sm, label: "gem" }

<i class="glyph fa fa-gem fa-1x"></i> gem