CODEWITHSUNDEEP
npmiconslaravel-mix
eleven0
eleven0

Reputation: 363

How to Use Feather Icons on Laravel through Laravel Mix, NPM

I am trying to use feather icons in laravel enviroment, I thought i would do it through npm. Can someone help me understand how this work as I couldnt get it working. I am very new to working with packages.

I installed 

npm install feather-icons --save

then I added const feather = require('feather-icons') to my resource/app.js,

then I run "npm run dev"

  1. How would i display the icons listed at this website (say cirlce) on my pages?

  2. Is what I did above correct?

Thanks

Upvotes: 9

Views: 6180

Answers (3)

Mihai Stana
Mihai Stana

Reputation: 11

For laravel 10 you need to add these 2 lines inside resources/js/app.js

import feather from 'feather-icons';
feather.replace();

After that just run

npm run build

Upvotes: 1

mhrabiee
mhrabiee

Reputation: 815

Yes what you did is correct. Follow the steps for adding icon to your project.

  1. Add feather.replace() method in same app.js file.
  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>

Or if you are using Laravel Mix 

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

Upvotes: 6

MOAZZAM RASOOL
MOAZZAM RASOOL

Reputation: 169

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>

Upvotes: 2

Related Questions