Elixir Phoenix でのbootstrap iconの使い方

PhoneixでBootstrap Iconsを使う

liveviewやlivecomponentでアイコンを使いたくなったのですが、

hexに登録されているライブラリがあまり使いやすくなかったため、別のやり方を探していたら、

↑phoenixでbootstrap iconsの使い方を説明している記事を見つけました。

3ステップでめちゃくちゃ簡単にbootstrap iconsが使えるようになるみたいです。

手順

①mixプロジェクトのままのディレクトリでbootstrap-iconsをインストール

npm --prefix=assets install bootstrap-icons file-loader --save-dev

②スタイルシートにCSSとwebfontsをインポート

assets/css/app.scss

+ @import '../node_modules/bootstrap-icons/font/bootstrap-icons.css';
+
+ @font-face {
+   font-family: 'bootstrap-icons';
+   src: font-url('../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2') format('woff2'),
+     font-url('../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff') format('woff');
+ }

③webfontsのfile-loaderを設定する

assets/webpack.config.js

           test: /\.[s]?css$/,
           use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
         },
+        {
+          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: '[name].[ext]',
+                outputPath: 'fonts/',
+              },
+            },
+          ],
+        },
       ],
     },
     plugins: [

あとは下記のようにすればok

<i class="bi bi-plus-circle"></i>

　　
　　

他のやり方もあるみたいです↓

注意事項

tailwindcssも使っている場合、bootstrap-iconsとの併用が原因でtailwindcssが動かなくなるエラーがありました。
tailwindcssと併用する際にはご注意ください。

備考

hex packageでsurface_heroiconsであれば、mix.exsのdepsに追加するだけでheroiconsの豊富なiconを使用できます。