csswebpacksassiconslaravel-mix

How to compile feather-icons into a css file?

I bought a html/css theme and it uses this package:

https://github.com/feathericons/feather

When I run npm install feather-icons --save-dev I get this installed under node_modules:

enter image description here

inside icons/ there are simply .svg files/icons

enter image description here

I don't get it how did the seller of this theme, create this file structure under public/fonts/feather folder out of that package???

enter image description here

Is there some kind of tool to generate these files out of that npm package or what???

Solution

  • What theme author did is correct. because you can update your icon when it's linked to NPM repository. By the way follow the steps for adding icon to your project.

    1. Add feather.replace() method in app.js file. (If you using default Laravel Mix structure)
    2. Link generated file to your layout or page it should be stored in public/js by default so the script tag is looks like (assuming you using it in Laravel Blade)
    <script src="{{ asset('js/app.js') }}"></script>
    1. Add desired icon to your markup
    <h1><i data-feather="circle"></i>Hello World</h1>

    it should work fine. alternatively you can use directly by linking to 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>

    Alternatively you may use mix.copy or mix.copyDirectory to copy from node modules. For example

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

    PS: For more info https://laravel.com/docs/5.8/mix