CODEWITHSUNDEEP
laravelvue.jsfont-awesomelaravel-bladevite
sajendra
sajendra

Reputation: 437

How can I use fontawesome icons in a laravel application using vite?

I have installed @fortawesome/fontawesome-free package using npm. The latest Laravel application uses vite by default. I am unable to solve this issue. Any help would be much appreciated. My vite.config.js is

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
            'resources/admin/css/app.css',
            'resources/admin/js/app.js',
            'resources/css/glide.css',
            'resources/js/glide.js',
            'resources/js/Sortable.js',
            'resources/js/tinymce.js',
            'resources/sass/app.scss',
            'resources/admin/sass/app.scss',
        ]),
        {
            name: 'blade',
            handleHotUpdate({ file, server }) {
                if (file.endsWith('.blade.php')) {
                    server.ws.send({
                        type: 'full-reload',
                        path: '*',
                    });
                }
            },
        },
        viteStaticCopy({
            targets: [
                {
                    src: 'node_modules/@fortawesome/fontawesome-free/webfonts',
                    dest: '',
                },
            ],
        }),
    ],
});

I imported fontawesome scss files in app.scss. My app.scss file contains

@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/brands";
@import "@fortawesome/fontawesome-free/scss/regular";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/v4-shims";

I tried using a third party library https://github.com/sapphi-red/vite-plugin-static-copy to copy webfonts of fontawesome package. Is there a better way than this?

Upvotes: 4

Views: 13586

Answers (4)

Michaël
Michaël

Reputation: 509

More simple way ! the js file of the package has everything !

1 Install the package

npm install @fortawesome/fontawesome-free

2 Import it in resources/js/app.js only what you need to minimize the size.

@import '@fortawesome/fontawesome-free/js/fontawesome';

@import '@fortawesome/fontawesome-free/js/solid';

3 Enjoy

<i class="fa-solid fa-sort"></i>

You also need to have sass installed. Nothing to change in vite conf.

My vite conf if you need :

import {defineConfig, preprocessCSS} from 'vite';
import laravel from 'laravel-vite-plugin';
import * as path from "path";

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/sass/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Upvotes: 1

Harsh Patel
Harsh Patel

Reputation: 1334

in Laravel 9 OR Above, by default Laravel use Vite to bundle your application's CSS and JavaScript files into production ready assets.

Now if you need to use FontAwesome with Vite in laravel then you can do it as below way.

Step 1:- Run npm i @fortawesome/fontawesome-free command for install Font Awesome. by running above command fontawesome will be installed in "node_modules" directory (full path:- {root_dir}/node_modules/@fortawesome/fontawesome-free).

Step 2:- Open {root_dir}/vite.config.js file and add below path in this file

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
            // add below path of fontawesome
            '~fontawesome': path.resolve(__dirname, 'node_modules/@fortawesome/fontawesome-free'), // <- add this line

        }
    },
});

Step 3:- Now open {root_dir}/resources/sass/app.scss file & import fontawesome scss as like below

// Bootstrap
@import 'bootstrap/scss/bootstrap';

// for FontAwesome v6+
$fa-font-path: '~fontawesome/webfonts';
@import '~fontawesome/scss/fontawesome';
@import '~fontawesome/scss/brands';
@import '~fontawesome/scss/solid';

Note that, in last step we import the fontawesome files. but that import path may different. here currently I used latest version (6.4) of FontAwesome. Refer this for more read about "how to use fontAwesome with Sass"

Upvotes: 4

sajendra
sajendra

Reputation: 437

I solved it by first installing sass pre-processor:

npm install -D sass

after that I imported all fontawesome scss files into my app.js file:

import './bootstrap';
import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
import '@fortawesome/fontawesome-free/scss/brands.scss';
import '@fortawesome/fontawesome-free/scss/regular.scss';
import '@fortawesome/fontawesome-free/scss/solid.scss';
import '@fortawesome/fontawesome-free/scss/v4-shims.scss';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Upvotes: 7

Eldair
Eldair

Reputation: 15

It is quite easy if you are not adding it via npm. Copy entire fontawesome dir into resources dir (/resources/fontawesome), then declare variable in your scss file like (assuming you are doing it in a file inside /resources/sass:

$fa-font-path: '../fontawesome/webfonts';

and import fontawesome files:

@import '../fontawesome/scss/brands';
@import '../fontawesome/scss/solid';
@import '../fontawesome/scss/light';
@import '../fontawesome/scss/fontawesome';

Build script will copy files to your /public/build/assets dir and change urls and dev script will load them from your resources dir.

Upvotes: 1

Related Questions