如何通过 Laravel Mix、NPM 在 Laravel 上使用羽毛图标答案

【问题标题】：How to Use Feather Icons on Laravel through Laravel Mix, NPM如何通过 Laravel Mix、NPM 在 Laravel 上使用羽毛图标
【发布时间】：2019-06-20 16:28:29
【问题描述】：

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

我安装了

npm install feather-icons --save

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

然后我运行“npm run dev”

如何在我的页面上显示此网站上列出的图标（比如圆圈）？
我在上面所做的是否正确？

谢谢

【问题讨论】：

标签： npm icons laravel-mix

【解决方案1】：

是的，您所做的是正确的。按照为您的项目添加图标的步骤。

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

&lt;script src="{{ asset('js/app.js') }}"&gt;&lt;/script&gt;

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

&lt;h1&gt;&lt;i data-feather="circle"&gt;&lt;/i&gt;Hello World&lt;/h1&gt;

它应该可以正常工作。或者，您可以通过链接到 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>

【讨论】：

非常感谢，我好像错过了feather.replace()。它现在正在工作。你能帮我缩小字体大小吗？我该怎么做？
欢迎您。我不明白你的意思是缩小字体大小是什么意思？是否要减小字体大小？
我的意思是如何减小图标的大小？有点太大了。
如果您的意图是宽度和高度，您可以通过 CSS 设置它，但如果您的意思是文件大小，核心脚本大约为 16.5 KB，您不必担心。对于 CSS，您使用 .feather 类和 width height 属性。
我可以用 CSS 改变大小，非常感谢。

【解决方案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>

【讨论】：