Integrating Feather Icons with Laravel Using NPM and Laravel Mix

[lily_luminesce]

I’m trying to set up feather icons in my Laravel project using npm but I’m having trouble getting it to work properly. I’m pretty new to working with npm packages so I might be missing something obvious.

Here’s what I did so far:

npm install feather-icons --save

Then I added this line to my resources/js/app.js file:

const featherIcons = require('feather-icons')

After that I ran:

npm run dev

I have two main questions:

1. How do I actually display specific icons (like the circle icon) on my blade templates?
2. Are the steps I took above the right approach for this setup?

Any help would be appreciated since I’m still learning how to work with npm packages in Laravel.

[JollyMusic3]

You’re on the right track, but there’s an easier way without calling replace() everywhere. Skip requiring feather-icons in app.js and just import the SVG strings directly into Blade components.

Make a new component at resources/views/components/icon.blade.php and drop the SVG markup straight from feather’s docs. No JavaScript needed, plus it’s faster since everything renders server-side.

For the circle icon, just grab the SVG code and throw it in your component. Use a prop for the icon name so you can reuse it. This plays nice with Laravel’s caching too, and won’t break if JS doesn’t load. I switched after getting annoyed with all the timing issues from JavaScript initialization.

[SkippingLeaf]

Your setup’s mostly right, but you’re missing a key step. After requiring feather-icons in app.js, you need to call featherIcons.replace() to actually initialize them. Had the exact same problem when I started using Feather icons.

In your blade templates, just add icons with the data-feather attribute: <i data-feather="circle"></i>. Call featherIcons.replace() after the DOM loads - either at the bottom of app.js or in a document ready function.

One thing that bit me: if you’re adding new icons dynamically with JavaScript, you’ll need to run featherIcons.replace() again. Also check that your compiled assets are loading properly in your blade layout using the mix() helper.

[amelial]

Skip npm and just use the CDN for feather icons. Way easier than messing with webpack configs. Drop <script src="https://unpkg.com/feather-icons"></script> in your layout, call feather.replace(), and you’re done. No more random build failures.

[sapphireSkies]

The Problem:

You’re trying to integrate Feather Icons into your Laravel project using npm, but you’re finding the process cumbersome and prone to build issues as your project grows. The initial approach of using npm install feather-icons and then featherIcons.replace() in your JavaScript, while functional, becomes increasingly difficult to manage with more icons and complex build processes.

Understanding the “Why” (The Root Cause):

The core issue isn’t just about displaying icons; it’s the overhead of managing assets, webpack configurations, and the build process itself. Each new icon or change requires re-debugging the build, leading to significant developer frustration and lost productivity. Manually managing icon integration in a Laravel project with numerous icons becomes unsustainable. The solution proposed in the original answer acknowledges this by shifting away from a purely JavaScript-based solution towards a more automated and scalable approach.

Step-by-Step Guide:

This guide focuses on automating your icon workflow to avoid manual headaches. While the initial answer mentions a specific product (“Latenode”), the core concept is applicable regardless of the chosen automation tool. The steps below outline a generalized approach to automating your icon integration, which can be adapted to suit your workflow and selected tools. These steps focus on creating a more maintainable system, avoiding direct npm and featherIcons.replace() issues:

1. Automate Icon Integration: The most effective solution is to create an automated workflow that handles all aspects of icon integration: npm installs, asset processing (like SVG optimization), and generating Blade components automatically. This allows you to add icons without manually editing JavaScript, configuring webpack, or dealing with build issues.

2. Choose an Automation Tool: Select an automation tool (e.g., Latenode, custom scripts with Node.js, a CI/CD pipeline) to handle the automated process. This tool will execute the steps below.

3. Define Icon Sources: Create a central location (e.g., a JSON file, a database table, or a folder structure) to manage your list of required Feather icons. This will be the input for the automation process.

4. Automated Download and Processing: Your automation tool will fetch the SVG files from the Feather Icons source. This likely involves using axios or similar tools to download the SVG, and further optional steps to optimize the SVGs.

5. Automated Blade Component Generation: The automation script automatically generates individual Blade components for each icon. This keeps your codebase organized and reduces repetitive code. Each component will simply include the downloaded SVG directly.

6. Automated Deployment: Integrate the entire automation process into your deployment pipeline (e.g., using tools like GitHub Actions, GitLab CI, or CircleCI). This ensures that every time you deploy, your icons are correctly integrated.

Common Pitfalls & What to Check Next:

• Error Handling: Ensure your automation script includes robust error handling. Log errors to a file or use a monitoring service to track issues.
• SVG Optimization: Consider optimizing the downloaded SVGs to reduce file sizes and improve performance (e.g., using tools like SVGO).
• Version Control: Track the downloaded icons, automated components, and scripts under version control for ease of maintenance.

Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!