Bootstrap IconsのSVGアイコンを使う

Bootstrap v3からそろそろv5に向けて移行しようかと調査しているときの覚書。
今まではアイコンフォントを便利に使っていたけど、これからはSVGアイコンの時代らしい。

環境： Node.js 10.19.0

参考

• WEB制作のワンポイント！ SVGアイコンを使うワケ | PINTO!
• アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう |  Webクリエイターボックス
• Can I use... Support tables for HTML5, CSS3, etc

使いたいのはBootstrap Icon。2020年3月時点でalpha3

• Bootstrap Icons · Official open source SVG icon library for Bootstrap

使い方はsvgファイルを１つのファイルにまとめてIDで呼び出す。

• Icon System with SVG Sprites | CSS-Tricks

実際にやってみる。
まずはBootstrap Iconsをインストール
$ npm install bootstrap-icons --save-dev

node_modules/bootstrap-icons/icons/にsvgファイルがある。
これを一つのsvgファイルにまとめる。
コマンドライン版のsvgstoreをインストール。

• GitHub | svgstore/svgstore-cli

$ npm install -g svgstore-cli

下記コマンドを実行
$ svgstore -p 'bi-' --inline -o bootstrap-icons.svg node_modules/bootstrap-icons/icons/*.svg

作成されたbootstrap-icons.svgをエディタで開いて確認する。
一つにまとめたsvgファイルは非表示にするため、svgタグにclassを追加しておく。

bodyタグの直下でsvgファイルを読み込む。


適当なところにID記述。


CSS(SCSS)に追記。

//
// Bootstrap Icons
//
svg.defs {
  display: none;
}
.bi {
  display: inline-block;
  position: relative;
  top: -1px;
  width: 1rem;
  height: 1rem;
  fill: $color;
}

表示は出来たけど、colorやfont-sizeが継承されないので使いにくい。

IconMoonを使うとsvgをアイコンフォントに変換できる。
（fontcustomでは綺麗に変換できなかった）

• Icon Font & SVG Icon Sets ❍ IcoMoon

【関連記事】

• CentOS6にfontcustomをInstallしてWebフォントを作成
• [Titanium] fontcustomをインストールしてアイコンフォントを作成