2

Our Vue app uses vuetify as its component library which by default uses material design icons. The only thing that needs to be done for the icons to work correctly is to import the css file which we do inside of the vuetify.js file:

import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
import colors from "vuetify/lib/util/colors";
import "@mdi/font/css/materialdesignicons.css";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.orange.lighten1,
      },
    },
  },
});

We use Vue CLI Plugin Electron Builder to build our app for desktop. The icons appear fine in dev mode when running vue-cli-service electron:serve, but if we build the app for production using vue-cli-service electron:build and run it on Windows or MacOS every icon is displayed as a rectangle.

rectangle icons

This is what our package.json looks like:

{
  "name": "...",
  "version": "0.2.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service electron:serve",
    "build": "vue-cli-service electron:build",
    "lint": "vue-cli-service lint",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
    "rebuild": "electron-rebuild -f -w serialport"
  },
  "dependencies": {
    "serialport": "^10.5.0",
    "vue": "^2.7.14",
    "vue-router": "^3.2.0",
    "vuetify": "^2.6.14",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@mdi/font": "^7.1.96",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.8",
    "@vue/cli-plugin-vuex": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/eslint-config-prettier": "^7.0.0",
    "electron": "^22.0.2",
    "electron-devtools-installer": "^3.2.0",
    "eslint": "^8.32.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.9.0",
    "plotly.js-dist": "2.18.2",
    "prettier": "^2.8.3",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "vue-cli-plugin-electron-builder": "^3.0.0-alpha.4",
    "vue-cli-plugin-vuetify": "^2.5.8",
    "vuetify-loader": "^1.9.2"
  },
  "overrides": {
    "vue-cli-plugin-electron-builder": {
      "electron-builder": "^23.1.0"
    }
  },
  "engines": {
    "node": ">=18"
  }
}

This is what our vue.config.js looks like:

const path = require("path");

module.exports = {
  lintOnSave: false,
  transpileDependencies: ["vuetify"],
  pluginOptions: {
    electronBuilder: {
      preload: "src/preload.js",
      externals: ["serialport"],
      outputDir: "builds",
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src/"),
      },
    },
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "~@/assets/style/_variables.scss"',
      },
    },
  },
};

Any ideas what could be causing this? Or how we can further debug the problem?

Stefan Bajić
  • 374
  • 4
  • 14
  • It does mention using a CSS loader as well. I don't know if that's the case for you (I don't do much CSS stuff so I can't tell). However I did have these sort of issues at work and it almost always ended up being assets served from one path during dev but being moved to a different path when the app is bundled up and packaged. I see you're using `electron-builder` perhaps you could define some assets path? Any chance we can look at some build config? – customcommander Mar 06 '23 at 20:31
  • By any chance, are you missing this line in your public/index.html file? `` I just built my electron app for production and icons show up fine. I don't have any imports like you do in my vuetify.js – EspressoCode Mar 07 '23 at 07:37
  • @customcommander sure, thanks for trying to help. The electron builder config is inside of `vue.config.js`, I've updated the post with its contents. – Stefan Bajić Mar 08 '23 at 16:15
  • vuetify version in `package.json` is 2 while the link you provided is for version 3. Can you provide an example of how you use the icon in a template? – Kalimah Mar 09 '23 at 01:27
  • I think you should post a minimal reproducible code, maybe in a code sandbox things. I know it's electron, but at least from that code we could try to replicate the errors first in our local machine – Damzaky Mar 09 '23 at 01:40
  • As I can't see in the information you provided, did you use the `iconfont` option in vuetify.js file? – Neha Soni Mar 10 '23 at 07:50
  • 2
    You haven't provided enough information to repro. Which makes your question unanswerable, considering that, ultimately, it's about CSS. Provide a repo or a codesandbox. You can remove all your business logic and only leave in a few icons and the config files, so anyone trying to help could test and find fixes/workarounds. – tao Mar 11 '23 at 03:46
  • 1
    What I mean by my previous comment is: I made an electron app with your config, built it and I can see icons on both windows and mac. So there must be something else causing your bug, and you haven't shared it yet. Without a repro, your chances of getting a useful answer are close to null. – tao Mar 11 '23 at 23:46

2 Answers2

3

The "vuetify icon not showing" post suggests installing @mdi/font, which you have done.

However, this is declared in devDependencies, which can be ignored when built for production, as explained here.

So I would first test if declaring that same @mdi/font packages in dependencies instead changes the "build for production" end result.

VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
  • Hey, thanks for trying to help and it was a smart suggestion but unfortunately that didn't work, the same issue persists. – Stefan Bajić Mar 08 '23 at 16:12
0

I had a similar problem once using Angular + Electron. What you can do is build your app with the devTools enabled, so you can see the console errors. In my case, Jquery was being imported after bootstrap, breaking my non-dev environments.

Danilo Bassi
  • 119
  • 1
  • 1
  • 9