如何将羽毛图标编译成css文件？答案

【问题标题】：How to compile feather-icons into a css file?如何将羽毛图标编译成css文件？
【发布时间】：2019-12-12 09:17:07
【问题描述】：

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

https://github.com/feathericons/feather

当我运行 npm install feather-icons --save-dev 时，我将它安装在 node_modules 下：

在图标/里面有简单的 .svg 文件/图标

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

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

【问题讨论】：

标签： css webpack sass icons laravel-mix

【解决方案1】：

主题作者的做法是正确的。因为您可以在链接到 NPM 存储库时更新您的图标。顺便按照步骤为您的项目添加图标。

在app.js 文件中添加feather.replace() 方法。（如果你使用默认的 Laravel Mix 结构）
将生成的文件链接到你的布局或页面，默认情况下它应该存储在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

【讨论】：