... ステータス（α版）
（機能追加後に随時更新していこうと思っています！が一旦Launchします！）
背景
チェックボックスやラジオボタンを手軽に（おしゃれに）組み込めないか考えた時に、
以下の選択肢に遭遇しました。
- iCheck.js
- → Jquery依存だったりする
- CSSでおしゃれに自作 https://deshinon.com/2019/03/02/sugoi-checkbox-animation/
- → コピペといえど大変..
（他にもっと簡単な方法があれば教えて下さい....orz）
fontawesomeはアイコン組み込むのになにかと使用されている方が多いのではと思います。
ちょうど、free版にもチェックボックスのアイコンも存在するので組み合わせて使ってお手軽に実装と行こうではないかと考え立ちました。
ちなみに、checkboxの疑似要素(before)を使ってCSSのみでfontawesomeを組み込む方法も紹介されていたのですが、アイコンサイズとラベルのサイズを調整するのが面倒だったりします。
なので、「jQueryにも依存しない、fontawesomeを手軽に組み込めるJSライブラリー」が欲しいということで作成に至りました！
名前は、awesome = イケてる に対して、 wonderful = 素晴らしい という発想からの、イメージは犬! =3
レポジトリ
こちらに公開しました！
wonderful.js ｜ DOC
使い方
1. fontawesomeを使用する準備をしてください
- 以下のような形でfontawesomeをimport
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI="
crossorigin="anonymous"/>
2. レポジトリからwonderful.js をダウンロードして、アプリにimportしてください
（bodyタグの最下部が望ましいです）
<script type="text/javascript" src="wonderful.js"></script>
以上！
デフォルト設定だけで以下のようなデザインに仕上がります
ちょっと貧相ですが、使いたいアイコン、色に変更可能です！
設定（Configuration）
Checkbox
| 設定 | デフォルト | 説明 |
|---|---|---|
| targetClass | undefined | カスタマイズしたい要素に付与するクラス名を指定する |
| isStack | false | アイコンを重ねて表示したい場合にtrueを設定する |
| bfFontClass | far fa-square (if:isStack = true then far 'fa-square') | アイコンのクラスを設定 |
| bfFontClassStacked | far fa-square fa-stack-1x | 重ねて表示するアイコンのクラスを設定 |
| bfColor | black | アイコンの色を設定 |
| bfColorStacked | black | 重ねて表示するアイコンの色を設定 |
| bfSize | 1.5rem | アイコンのサイズを設定 |
| bfSizeStacked | 1.5rem | 重ねて表示するアイコンのサイズを設定 |
| bfMarginRight | 8px | ラベルとの距離を調整するために設定 |
| afFontClass | far fa-square (if:isStack = true then far 'fa-square') | アイコンのクラスを設定 |
| afFontClassStacked | far fa-square fa-stack-1x | 重ねて表示するアイコンのクラスを設定 |
| afColor | black | アイコンの色を設定 |
| afColorStacked | black | 重ねて表示するアイコンの色を設定 |
| afSize | 1.5rem | アイコンのサイズを設定 |
| afSizeStacked | 1.5rem | 重ねて表示するアイコンのサイズを設定 |
| afMarginRight | 8px | ラベルとの距離を調整するために設定 |
| labelSize | 1rem | ラベルの文字サイズを設定 |
※bf*,af* はcheck前後の設定を表しています。
Other Sample
TBI（今後の展開）
- Webpackでjavascriptの環境作ってんですが、Typescript化したい
- Checkboxやinputboxにも対応させる
- 使いやすいようにリファクタリングする