LaravelでBootstrap-Iconsを利用する

3159 ワード
bootstrap-icons laravel8 Laravel-Mix Laravel-Mix テキストリンク

まず問題！

main.blade.php
<img src="./node_modules/bootstrap-icons/icons/bootstrap-fill.svg" alt="" width="32" height="32" title="Bootstrap">

上のパスのどこが間違ってるでしょうか！正解はnode_modulesにアクセスはできないってとこです！

404で参照できないって言われます...。
まぁ参照する方法はあると思うのですが、まずnode_modulesはGit管理外の場所なのでおすすめはしないです。

そこでなら調べたらLaravel/Mixに良い機能があるではないですか！

https://readouble.com/laravel/5.5/ja/mix.html

mix.copyにコピー元とコピー先を指定すればnpm run devなどの実行時にコピーしてくれるみたいです。

public\の中なら読み込みができるのでbootstrap-iconsというフォルダーを作成して

webpack.mix.js
mix.copy('node_modules/bootstrap-icons', 'public/bootstrap-icons');

を追加してnpm run devを実行すれば

コピーされてると思います！

あとは

main.blade.php
<img src="bootstrap-icons/icons/bootstrap-fill.svg" alt="" width="32" height="32" title="Bootstrap">

に変更すれば表示できると思います！