Using Fontello fonts with Vite

Question

I've been using Fontello icons for a few years with webpack. Now I want to use those same fonts on a new Laravel 10 site. Laravel 10 comes with Vite, instead of the using mix along with webpack.

My problem is that when running npm run build I see the followig error for each of the fontello font files named (eot, woff, and svg):

./font/icons.eot?37060991 referenced in /var/dev/icons/resources/sass/app.scss didn't resolve at build time, it will remain unchanged to be resolved at runtime

And then the icons do not render in the page.

In the fontello/css/icons.css file the URL for each file starts with:

../font/icons.

I've tried various path combinations, like ../../fontello/font/, but nothing seems to work.

I would really like to continue using the Fontello icons, mostly because they make it easy to load only those icons images that we are actually using. I can see that Vite is the way to go, at least for the foreseeable future, and especially when using Vue. So gettng Fontello icons to work is pretty essential.

Answer 1

After some additional searching around I found the solution:

I added an alias to the vite.config.js file:

export default defineConfig({
    resolve: {
        alias: [{
            // this alias it to allow us to include fontello icons
            find: '../font',
            replacement: path.resolve(__dirname, 'resources/sass/fontello/font'),
        }],
    },
};

Be sure to add this line near the top:

import path from 'path';

Now 'npm run build' runs without warnings and the fontello provided icons appear on the page as expected.