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

Question

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

我安装了

npm install feather-icons --save

然后我将

const feather = require('feather-icons')

添加到我的资源/app.js，

然后我运行“npm run dev”

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

谢谢

Answer 1

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

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

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

或者如果你正在使用 Laravel Mix

<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>

Answer 3

对于 laravel 10，您需要在 resources/js/app.js 中添加这两行

import feather from 'feather-icons';
feather.replace();

之后就跑

npm run build

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

问题描述投票：0回答：3

3个回答

最新问题

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

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3