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

Asked 27/1, 2019 at 14:4 Answered 3/3, 2023 at 8:20

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"

How would i display the icons listed at this website (say cirlce) on my pages?
Is what I did above correct?

Thanks

Crafton answered 27/1, 2019 at 14:4 Comment(0)

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

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

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>

Adelina answered 29/1, 2019 at 12:13 Comment(7)

Thanks a lot,it seems I was missing feather.replace(). It is working now. Can you help me with reducing the size to font size? How can i do that? – Crafton 30/1, 2019 at 8:54

Your welcome. I don't get it what do you mean reduce the size to font size? Do you want to reduce the fonts size? – Adelina 30/1, 2019 at 12:16

I mean how can I reduce the size of the icon? It's bit too big. – Crafton 30/1, 2019 at 12:19

If your intention is width & height you can set it via CSS but if you mean file size the core script is approximately 16.5 KB and you should not worry about it. for CSS you use .feather class with width height properties. – Adelina 30/1, 2019 at 12:38

I was able to change the size with CSS, thanks a lot. – Crafton 30/1, 2019 at 14:0

Hey there, I have one more question. Do you know a way to use the icons in my app.scss file? I am trying to change one of my <ul> to have a feather icon as list-style-image? I guess I can put all icons in my public view and point it to it. Is it possible for me to that without the putting all icons in my public folder? – Crafton 3/2, 2019 at 14:10

As far as i know you should use public which is a standard way to use an asset because we can't reference node_module folder like so list-style-image: url('~feather-icons/icons/circle.svg'); (though it would be great if there is a way.) – Adelina 4/2, 2019 at 6:11

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>

Tucky answered 30/4, 2020 at 13:49 Comment(0)

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

Malang answered 3/3, 2023 at 8:20 Comment(0)

Recommended topics

Hot tags