microsoft/azure-devops-extension-hot-reload-and-debug

Icons not showing

Bilals2412 opened this issue · 3 comments

Bilals2412 commented

Hi there,

After downloading this project and testing it in an environment of mine, I noticed that the icons are not loading properly. Does anyone have a tip?

The error code in the console:

  1. Failed to decode downloaded font: https://{name}.gallery.vsassets.io/dist/acb0b44d710a15f95219.woff

  2. OTS parsing error: invalid sfntVersion: 218762506

MaciekWin3 commented

Hi @Bilals2412, one workaround I found is to paste the font directly into your CSS file, just like in this example created by the authors of azure-devops-ui: https://codesandbox.io/s/wtjhzm?module=example.tsx&file=/iconFont.css. I know it's not perfect, but at least it works.

  • 👍1
SuperNowyNick commented

I've found that the issue is caused by webpack referencing required .woff files through absolute path instead of relative one.
Removing line publicPath: "/dist/", from webpack.config.js fixed it in my case.
There is also another issue though related to the font format not being recognized. But changing the .woff2 file loader in webpack config to:

{
    test: /\.woff2?$/i,
    type: 'asset/resource',
    dependency: { not: ['url'] },
},

fixes it.

  • 👍2
MaciekWin3 commented

Nice work @SuperNowyNick! I'll give it a try next time when building new extension.

  • 👍1