LoginSignup
2
1

More than 3 years have passed since last update.

LaravelでBootstrap-Iconsを利用する

Posted at

まず問題!

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

上のパスのどこが間違ってるでしょうか!正解はnode_modulesにアクセスはできないってとこです!
image.png
404で参照できないって言われます...。
まぁ参照する方法はあると思うのですが、まずnode_modulesはGit管理外の場所なのでおすすめはしないです。

そこでなら調べたらLaravel/Mixに良い機能があるではないですか!
image.png
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を実行すれば
image.png
コピーされてると思います!

あとは

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

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1