如何通过 Laravel Mix、NPM 在 Laravel 上使用羽化图标

Question

我正在尝试在 laravel 环境中使用羽毛图标，我想我会通过 npm 来完成。有人可以帮助我理解它是如何工作的，因为我无法让它工作。我对使用包很陌生。

我安装了

npm install feather-icons --save

然后我将 const feather = require('feather-icons') 添加到我的 resource/app.js，

那我运行"npm run dev"

我如何在我的页面上显示此网站（例如 cirlce）列出的图标？
我上面做的对吗？

谢谢

Answer 1

是的，你做的是正确的。按照将图标添加到项目的步骤进行操作。

在同一个 app.js 文件中添加 feather.replace() 方法。
Link 为您的布局或页面生成的文件默认情况下应存储在 public/js 中，因此脚本标签看起来像（假设您在 Laravel Blade 中使用它）

<script src="{{ asset('js/app.js') }}"></script>

或者如果您正在使用 Laravel 混合

<script src="{{ mix('js/app.js') }}"></script>

将所需的图标添加到您的标记中

<h1><i data-feather="circle"></i>Hello World</h1>

它应该可以正常工作。或者您可以通过链接到 CDN 直接使用。

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <!-- example icon -->
    <i data-feather="circle"></i>

    <script>
      feather.replace()
    </script>
  </body>
</html>

Answer 2

1.resource/assets/js/app.js
=================================
2.paste this code 
=================================

 require('./bootstrap');
//integrate
 const feather = require('feather-icons')
//call
 feather.replace();

============================================
3.write on terminal
============================================
npm install feather-icons
npm run dev

=======================================
4.in blade file
=======================================
<!DOCTYPE html>
<html lang="en">
  <title></title>

  <body>

    <!-- example icon -->
    <i data-feather="circle"></i>


  </body>
</html>

如何通过 Laravel Mix、NPM 在 Laravel 上使用羽化图标

How to Use Feather Icons on Laravel through Laravel Mix, NPM

icons

npm

laravel-mix