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

Question

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

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

我安装了

npm install feather-icons --save

Run Code Online (Sandbox Code Playgroud)

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

然后我运行“npm run dev”

我将如何在我的页面上显示在这个网站上列出的图标（比如圆）？
我上面做的对吗？

谢谢

Answer 1

mhr*_*iee 6

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，9 月前
查看次数：	2683 次
最近记录：	5 年，5 月前