fontawesomeをサクッと組み込むためのライブラリ「wonderful.js」を作ってみた

6218 ワード
library JavaScript FontAwesome CSS3 HTML5 JavaScript テキストリンク

... ステータス（α版）

（機能追加後に随時更新していこうと思っています！が一旦Launchします！）

背景

チェックボックスやラジオボタンを手軽に（おしゃれに）組み込めないか考えた時に、

以下の選択肢に遭遇しました。

（他にもっと簡単な方法があれば教えて下さい....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にも対応させる
  • 使いやすいようにリファクタリングする