<feathericons>HTMLにかっこいいアイコンを使用したい!

今回の目的

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画像を埋め込むタグ等に変換してくれます。
以上で、circleが指定の場所に表示されます!!