Vite build can't detect icon paths

[pembeci]

To replicate, you may create a vitejs Vue app, include prime icons, build the project (vite serve mode works fine) and check the generated style file. Some of the font assets are not included (search for VITE in style file) and project would miss them when deployed to production. I was able to fix it by merging all the src definitions. I think multiple src definitions on font-face is not strict css and gets Vite confused.

@font-face {
    font-family: 'primeicons';
    font-display: auto;
    src: url('./fonts/primeicons.eot') format('embedded-opentype'), 
          url('./fonts/primeicons.ttf') format('truetype'), 
          url('./fonts/primeicons.woff') format('woff'), 
          url('./fonts/primeicons.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

[onursenture]

It's auto-generated by Icomoon. We're considering to merge as you suggest but we don't understand why did you delete ?primeicons part from svg import and iefix. There are so many projects depends on this. Therefore, it's not possible to merge until we 100% sure there won't be any issues for anyone else.

Thanks,

[pembeci]

I think you can put back those parts. I don't remember now why I deleted those. Main issue was with Vite not producing the correct merged assets while building in its current form. May be check with Icomoon also if they already fixed it.

[tugcekucukoglu]

To reproduce the issue I have used primevue-quickstart-vite repo and import the primeicons.css into main.js. Generated css file in production:

@font-face{
    font-family:"primeicons";
    font-display:auto;
    src:url(/assets/primeicons.7362b83d.eot);
    src:url(/assets/primeicons.7362b83d.eot?#iefix) format("embedded-opentype"),
        url(/assets/primeicons.c1e93246.ttf) format("truetype"),
        url(/assets/primeicons.3929b551.woff) format("woff"),
        url(/assets/primeicons.8f9d2aaf.svg?#primeicons) format("svg");
    font-weight:normal;
    font-style:normal}

.pi{
    font-family:"primeicons";
    ...
}
.pi:before{
   ...
}

Currently I could not understand the issue. How can I replicate it? Maybe, you can create a codesandbox link for us to replicate?

[pembeci]

Hmm, first I couldn't replicate it with the repo you sent, then I added "sass": "1.34.0" to dev_dependencies in package.json (which we are using) and it appeared:

@font-face{font-family:primeicons;font-display:auto;src:url(/assets/primeicons.e11e476b.eot);src:url(/assets/primeicons.e11e476b.eot?#iefix__) format('embedded-opentype'),url(__VITE_ASSET__27a2411c) format('truetype'),url(__VITE_ASSET__61f97c4c) format('woff'),url(__VITE_ASSET__ce9c68ce__?#primeicons) format('svg');font-weight:400;font-style:normal}

So to replicate you may try adding sass as a dependency.

[pembeci]

Here is the package.json I used. I fixed also some of the versions before testing sass but I think main culprit is interaction of sass with others.

{
  "name": "primevue-quickstart-vite",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "3.0.5",
    "primevue": "3.5.1",
    "primeicons": "4.1.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "1.0.6",
    "@vue/compiler-sfc": "3.0.5",
    "vite": "2.0.0-beta.30",
    "sass": "1.34.0"
  }
}

[tugcekucukoglu]

I have tried again adding 'sass'. The result is the same for me.

How do you import the PrimeIcons?

[onursenture]

Can you send us a sample repo for case replication? @pembeci

[Beyarz]

Experiencing the same issue with snowpack.

[pembeci]

You may try this: https://github.com/pembeci/primevue-quickstart-vite

[pembeci]

I am building on Windows btw. @Beyarz are you on Windows? I wonder if that makes a difference.

[Beyarz]

I am building on Windows btw. @Beyarz are you on Windows? I wonder if that makes a difference.

I am on macOS actually.

[tugcekucukoglu]

It seems Vite causing the problem not Sass. Could you please try to use latest Vite version?

[Beyarz]

I managed to find the bug and solve my case, so I thought I'd share it here in case it helps anyone else.

In my configurations file snowpack.config.js I had to mount the fonts to node_modules like following:

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
    mount: {
        src: '/dist',
        public: '/',
        'node_modules/primeicons/fonts/': '/fonts/'
  },
}

Secondly, when building to production, I had to turn off bundling since esbuild was unable to parse the hashtags (#iefix & #primeicons) on the @font-face. So by turning bundle: off, my issues got solved. Luckily, Snowpack allows me to bundle via Webpack & Rollup so I'll have to go that path instead.

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  optimize: {
    bundle: false,
    minify: true,
    preload: true,
    sourcemap: false,
    target: 'es2017'
  },
}

This is the line that caused esbuild to crash in my case. src: url('./fonts/primeicons.eot?#iefix') format('embedded-opentype'), url('./fonts/primeicons.ttf') format('truetype'), url('./fonts/primeicons.woff') format('woff'), url('./fonts/primeicons.svg?#primeicons') format('svg');

Here's the error log:

$ snowpack build --config snowpack.config.js
[23:15:39] [snowpack] ! building files...
[23:15:53] [snowpack] ✔ files built. [14.20s]
[23:15:53] [snowpack] ! building dependencies...
[23:15:57] [snowpack] ✔ dependencies built. [3.91s]
[23:15:57] [snowpack] ! writing to disk...
[23:15:57] [snowpack] ✔ write complete. [0.07s]
[23:15:57] [snowpack] ! optimizing build...
 > build/dist/App.css:31193:11: error: Could not resolve "./fonts/primeicons.eot?#iefix"
    31193 │   src: url("./fonts/primeicons.eot?#iefix") format("embedded-opentype"), url("./fonts/primeicons.ttf") form...
          ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > build/dist/App.css:31193:174: error: Could not resolve "./fonts/primeicons.svg?#primeicons"
    31193 │ ..."), url("./fonts/primeicons.woff") format("woff"), url("./fonts/primeicons.svg?#primeicons") format("svg");
          ╵                                                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[23:15:58] [snowpack] Build failed with 2 errors:
build/dist/App.css:31193:11: error: Could not resolve "./fonts/primeicons.eot?#iefix"
build/dist/App.css:31193:174: error: Could not resolve "./fonts/primeicons.svg?#primeicons"
[23:15:58] [snowpack] Error: Build failed with 2 errors:
build/dist/App.css:31193:11: error: Could not resolve "./fonts/primeicons.eot?#iefix"
build/dist/App.css:31193:174: error: Could not resolve "./fonts/primeicons.svg?#primeicons"

[melloware]

I am not sure if this is related but I can't seem to get PrimeIcons 5.0.0 to show in in CodeSandbox.

And this user reported this: https://stackoverflow.com/questions/70897722/primeicons-not-working-on-server-with-no-internet

See Code Sandbox reproducer: https://codesandbox.io/s/primereact-test-forked-88r7zn?file=/src/index.js