Bootstrap IconsのSVGアイコンを使う

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

環境: Node.js 10.19.0

参考

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

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


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

node_modules/bootstrap-icons/icons/にsvgファイルがある。
これを一つのsvgファイルにまとめる。
コマンドライン版のsvgstoreをインストール。
$ 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では綺麗に変換できなかった)


【関連記事】

コメント

このブログの人気の投稿

【.NET】DataGridViewを選択した際に背景色を変更しない

【PostgreSQL】ROWNUMのように行番号(現在行)を取得するROW_NUMBER

Can't open PID file /var/run/nginx.pid (yet?) after start: Too many levels of symbolic links