Bootstrap の SVG icon を使ってみたら簡単に使えた話
簡単に使える icon は無いものか探していたら、「Bootstrap の SVG icon が簡単に使えるよ」って言われたので、行ってみたら本当に簡単だった。という話をメモします。
1, Bootstrap のページに行く
https://icons.getbootstrap.com/
2, 表示したいアイコンを選ぶ
https://icons.getbootstrap.com/icons/arrow-repeat/
3, SVG teg をコピーして、
下の方に表示されている SVG teg をコピーする。いまのところ便利なコピーボタンとかは見当たらない。
<svg class="bi bi-arrow-repeat" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2.854 7.146a.5.5 0 00-.708 0l-2 2a.5.5 0 10.708.708L2.5 8.207l1.646 1.647a.5.5 0 00.708-.708l-2-2zm13-1a.5.5 0 00-.708 0L13.5 7.793l-1.646-1.647a.5.5 0 00-.708.708l2 2a.5.5 0 00.708 0l2-2a.5.5 0 000-.708z" clip-rule="evenodd"/>
<path fill-rule="evenodd" d="M8 3a4.995 4.995 0 00-4.192 2.273.5.5 0 01-.837-.546A6 6 0 0114 8a.5.5 0 01-1.001 0 5 5 0 00-5-5zM2.5 7.5A.5.5 0 013 8a5 5 0 009.192 2.727.5.5 0 11.837.546A6 6 0 012 8a.5.5 0 01.501-.5z" clip-rule="evenodd"/>
</svg>
（右上の「Download」ボタンは、すべての SVG ファイルが zip になってダウンロードできるみたい。SVGファイルを img tag とかで表示したいひとはそちらからどうぞ。）
4, 表示したいところに貼り付ける
以上、おしましい。あー、簡単。
5, 必要なら色やサイズを調整して終了。
div tag にstyle を指定して、SVG tag を囲めばいい。
<div style='font-size: 7em; color: #eee; background-color: #555;'> ... </div>
終了。
あー、本当に簡単でした。
もっと種類が増えるといいですね。＞アイコン
みなさまのプログラミングライフの一助になれば幸いです。