Builderall Vue UI

# BUIIcon

Icon library for Builderall Vue UI. All icons are rendered in svg injected into html and allow customization of colors, rotation and size.

# Demo

# Code

<template>
  <div>
    <div class="d-flex py-3 my-3">
      <bui-icon
        name="lang"
        class="mx-2"
      />
      <bui-icon
        name="trash"
        class="mx-2"
      />
      <bui-icon
        name="upload"
        class="mx-2"
      />
      <bui-icon
        name="gear"
        class="mx-2"
      />
    </div>
    <b-button variant="primary">
      <bui-icon
        name="plus"
        variant="white"
        size="18"
      />
      Add new Calendar
    </b-button>
  </div>
</template>

# Available icons

backup
cart
cloud
database
globe-gear
globe-www
site
store
exit
lang
pencil
trash
gear
plus
menu-burger
menu-burger-open
link
dashboard
clock
mail
close
eye
copy
code
logo
move
user
save
bell
play
share
submit-mail
whatsapp
peoples
history
arrow-right
three-dots-vertical
next
file-transfer
server
server-settings
open-blank
site-mobile
ok-fill
circle-complete
circle-incomplete
info
upload
quizzes
help

# Size & Color

You can customize the size of the icon using the size property, in pixels.
To customize the colors, simply apply the properties css fill and stroke in the selector .bui-icon-{name} > svg.

# Demo

# Code

<template>
  <div>
    <div class="d-flex align-items-end mb-5">
      <bui-icon
        v-for="i in 8"
        :key="i"
        name="gear"
        class="mx-2"
        :size="i * 15"
        :variant="currentVariant"
      />
    </div>

    <b-button
      v-for="(variant, key) in variants"
      :key="key"
      class="m-1 border-0"
      :variant="variant"
      @click="currentVariant = variant"
    >
      {{ variant }}
    </b-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      variants: ['natural', 'primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark', 'white', 'gray'],
      currentVariant: 'natural'
    }
  }
}
</script>

Some icons do not have an equal proportion. So sometimes, you may need specific dimensions to correct this and achieve perfect alignment. You can do this with the height and width properties:

<bui-icon name="eye" size="30"></bui-icon>
<bui-icon name="eye" height="17"></bui-icon>
<bui-icon name="eye" width="30"></bui-icon>
<bui-icon name="eye" width="43" height="30"></bui-icon>

# Rotate

Use the rotate property to rotate the icon, in degress

# Demo

# Code

<template>
	<bui-icon
		name="arrow-right"
		v-for="r in [0, 90, 180, 270]"
		:key="r"
		:rotate="r"
		class="m-3"
	/>
</template>

TIP

You can use the rtl-mirror property to automatically mirror the icon when the document is in RTL

<bui-icon name="next" rtl-mirror />

# API Reference

# Props

Property Type Default Description
name String null Icon name
size Number 22 Icon size in px
height Number 22 Icon height in px
width Number 22 Icon width in px
rotate Number 0 Icon rotation
variant String '' Icon color variant in 'natural', 'primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark', 'white', 'gray'
rtl-mirror Boolean false If true, the icon will be mirrored when the document is in RTL

← Form group →