如何将 feather-icons 编译成 css 文件？

Question

我买了一个 html/css 主题，它使用这个包：

https://github.com/feathericons/feather

当我运行 npm install feather-icons --save-dev 我把这个安装在 node_modules:

里面的图标/只有 .svg files/icons

我不明白这个主题的卖家是如何在那个包的 public/fonts/feather 文件夹下创建这个文件结构的？？？

是否有某种工具可以从 npm 包中生成这些文件？？？

Answer 1

主题作者做的是正确的。因为你可以在链接到 NPM 存储库时更新你的图标。顺便说一句，按照将图标添加到项目的步骤进行操作。

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

<script src="{{ asset('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>

或者，您可以使用 mix.copy 或 mix.copyDirectory 从节点模块复制。例如

mix.copyDirectory('node_modules/feather-icons', 'public/icons');

PS：更多信息https://laravel.com/docs/5.8/mix

如何将 feather-icons 编译成 css 文件？

How to compile feather-icons into a css file?

css

icons

sass

webpack

laravel-mix