# Bone Flow #018 Icon - HTML Functional Class

Version: `1.0.21`  
DOC: `DOC-0018`

## 正式一般利用Class

#018 Icon の一般利用向けHTML Functional Classは **`bf-icon` 1件だけ**です。

```html
<span class="bf-icon fa-solid fa-star" aria-label="お気に入り"></span>
```

`bf-icon` はHTMLから #018 Icon Runtime (`BoneIcon`) を利用開始する入口です。`fa-star` の部分を #018 が使用するFont Awesome Solidの正式アイコンClassへ変更します。アイコン名を要素内Textで指定しません。

## 対応HTML要素

- `span`
- `i`

それ以外の要素へ `bf-icon` を付けた場合は `BONE_ICON_HTML_CLASS_ELEMENT_UNSUPPORTED` です。

## HTMLからRuntimeへ渡すもの

- `fa-<name>` Class → `name / unicode / className`
- `aria-label` / `title` → `title`
- `aria-disabled="true"` → `disabled=true`
- `font-size` → `size`
- `color` → `color`
- `background-color` → `backgroundColor`
- 対応する幅・高さ・Padding・Border・Radius・配置・Overflow・Opacity → `containerStyle`

## Public APIとの関係

HTML Functional ClassとJavaScript Public APIは別です。Public API 16件をHTML Classへ1対1変換しません。Animation、flip、rotate、表示/OUT、Name/Unicode書式、Gradient、Shadow、Active/Disabled詳細、Completion、およびRuntime Property Schemaは `BoneIcon` Public APIを使用します。

#048 Table向け正式Property定義はHTML Classではなく `BoneIcon.getPropertySchema()` が所有します。#048側へ#018 Property一覧を複製しません。

詳細な使い方、正式Default、全列挙値、Runtime Property Schema、使用サンプル、Public API、Error Codeは `DOC-0018` を参照してください。