---
tags: Vue, Component
---
# Vue - Bootstrap-vue icon Component.

## How to
* find element [carbon/icons-vue]
https://bootstrap-vue.org/docs/icons#icons-1


* for example find **"arrow-up"** icon
* Note that the keyword should be vue style.
* for compoment **BIcon{IconName}** such as **BIconArrowUp**
* for template **<b-icon-{icon-name}>** such as **<b-icon-arrow-up>**


* import and setup

import { BIconArrowUp } from 'bootstrap-vue';
export default {
  components   {
    ...
    BIconArrowUp,
    ...
},

* use element

<template>
  <div class="h2 mb-0">
    <b-icon-arrow-up></b-icon-arrow-up>
  </div>
</template>

* result

## Advance
### Sizing
https://bootstrap-vue.org/docs/icons#sizing
* Changed as current font-size.

<template>
  <div>
    <p class="h1 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h2 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h3 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h4 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h5 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
  </div>
</template>


* Changed with **style**.

<template>
  <div>
    <b-icon icon="exclamation-circle" style="width   120px; height   120px;"></b-icon>
  </div>
</template>


* Changed as current font-scale.

<template>
  <div>
    <b-icon icon="camera" font-scale="0.5"></b-icon>
    <b-icon icon="camera" font-scale="1"></b-icon>
    <b-icon icon="camera" font-scale="2"></b-icon>
    <b-icon icon="camera" font-scale="3"></b-icon>
    <b-icon icon="camera" font-scale="4"></b-icon>
    <b-icon icon="camera" font-scale="5"></b-icon>
    <b-icon icon="camera" font-scale="7.5"></b-icon>
  </div>
</template>


### Styling
https://bootstrap-vue.org/docs/icons#styling

### SVG transforms
https://bootstrap-vue.org/docs/icons#svg-transforms
* Flipping
* Rotate
* Scale
* Shifting

### Animated icons
https://bootstrap-vue.org/docs/icons#animated-icons

### Stacking icons
https://bootstrap-vue.org/docs/icons#stacking-icons

### Used in components
https://bootstrap-vue.org/docs/icons#using-in-components
* Button
* Button Group
* Input
* List
* Dropdowns

## ref:
* https://bootstrap-vue.org/docs/icons