今回の目的
HTMLに画像(アイコン目的の)を埋め込むときに、
わざわざ探すのがめんどくさい。
おまけにデザインを考慮すると探すのが難しい。
そこで、今回は feathericons というJavaScriptとして使用できるライブラリを使用してみる。
feathericons(Github)
とりあえず丸(circle)を表示してみる
- HTMLの内でライブラリをインクルード
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
- アイコンを埋め込みたい位置でタグを使用
<i data-feather="circle"></i>
- の最後のほうで、以下スクリプトを埋め込む
<script> feather.replace() </script>
このコード自体は、先ほどのタグの内容を、
本来svg画像を埋め込む