Rails 7.0でbootstrap-iconsを使う方法

（2022.2.20追記）

cssbundling-rails 1.1.0で bootstrap-icons のセットアップが自動的に行われるようになりました。

> Install bootstrap-icons along with bootstrap by @viktorianer in #76

https://github.com/rails/cssbundling-rails/releases/tag/v1.1.0

なので、cssbundling-rails 1.1.0を使った場合はこの記事で説明している手順が不要になると思います（ただし未検証）。
その点に留意して続きを読んでください。

ちなみにこの変更は僕がStackOverflowに投稿して自己解決したQ&Aにインスパイアされて実装された変更みたいです😄

> Many thanks to Junichi Ito on StackOverflow
> https://stackoverflow.com/questions/70526113/how-to-use-bootstrap-icons-with-rails-7-0

https://github.com/rails/cssbundling-rails/issues/63


---

Rails 7.0でbootstrap-iconsを使う方法を紹介します。

https://icons.getbootstrap.com/

## おことわり
この方法がベストかどうか確信がないので、もっといい方法があればコメント欄等で教えてください :pray: 

## 前提条件

以下のコマンドでrails newしたRails 7.0アプリを想定します。

```
rails new everydayrails-rspec-jp-2022 --css bootstrap
```

また、この記事で使う bootstrap-icons のバージョンは1.7.2です。

https://www.npmjs.com/package/bootstrap-icons

## 手順

bootstrap-iconsをインストールする

```console
npm i bootstrap-icons
```

`app/assets/stylesheets/application.bootstrap.scss`に以下の行を追加する

```scss:app/assets/stylesheets/application.bootstrap.scss
@import "bootstrap-icons/font/bootstrap-icons";
```

アイコンを使うviewを用意する

```erb 
  <%= link_to new_project_path, class: "btn btn-primary" do %>
    <i class="bi bi-plus" aria-hidden="true"></i>
    New Project
  <% end %>
```

`bin/dev`でサーバを起動する。これでOK・・・と思いきや、アイコンが表示されない！

![9ioc9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7465/3a61bad3-e45c-9f63-8c42-816accc962bc.png)

ログを見るとRoutingErrorエラーが起きている

```
Started GET "/fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff2"):
Started GET "/fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff"):
```

というわけで、追加で以下の対応を行う。`config/initializers/assets.rb`を編集する。

```ruby:config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
```

サーバを停止し、`bin/dev`でサーバを再起動する。これでOK！

![Screen Shot 2022-01-06 at 17.20.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7465/1c26fe3b-6759-2da8-b96c-923b54293dc1.png)

おしまい。


## 古い手順

以下は上の手順を見つける前に考えた手順です。こっちは参考にしなくて良いです。

bootstrap-iconsをインストールする

```console
npm i bootstrap-icons
```

`app/assets/stylesheets/application.bootstrap.scss`に以下の行を追加する

```scss
@import "bootstrap-icons/font/bootstrap-icons";
```

アイコンを使うviewを用意する

```erb 
  <%= link_to new_project_path, class: "btn btn-primary" do %>
    <i class="bi bi-plus" aria-hidden="true"></i>
    New Project
  <% end %>
```

`bin/dev`でサーバを起動する。これでOK・・・と思いきや、アイコンが表示されない！

![9ioc9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7465/3a61bad3-e45c-9f63-8c42-816accc962bc.png)

ログを見るとRoutingErrorエラーが起きている

```
08:05:31 web.1  | Started GET "/fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
08:05:31 web.1  |   
08:05:31 web.1  | ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff2"):
08:05:31 web.1  |   
08:05:31 web.1  | Started GET "/fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
08:05:31 web.1  |   
08:05:31 web.1  | ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff"):
```

というわけで、追加で以下の対応を行う。`public/fonts`ディレクトリを作成

```console
mkdir public/fonts
```

copyfilesをインストールする

```console 
npm i copyfiles
```

CSSビルド時にwoff/woff2ファイルがコピーされるように、`package.json`の"build:css"スクリプトを編集する。

```javascript 
"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
```

サーバを停止し、`bin/dev`でサーバを再起動する。これでOK！

![Screen Shot 2022-01-06 at 17.20.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7465/1c26fe3b-6759-2da8-b96c-923b54293dc1.png)

最後に、woff/woff2ファイルがgitにコミットされないように以下のコマンドを実行する。

```console
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore
```

おしまい。

## 備考
この記事はStack Overflowに投稿して自己解決したQ&Aの転載です。

https://stackoverflow.com/questions/70526113/how-to-use-bootstrap-icons-with-rails-7-0/70604272