1

I have a setup where I use Vue.js with Vite and UIkit. When opening the page, the Icons are not shown and the following error can be seen in the console:

Failed to load resource: the server responded with a status of 404 (Not Found) – http://localhost:3000/images/backgrounds/accordion-open.svg

This is for the little plus and minus buttons of an accordion element.

Errors like this only come up with 'builtin' icons, i.e. icons that are added to an element by UIkit. If I use <span uk-icon='question'/>, the Icon shows up as expected.

My main.ts looks like this:

import { createApp } from 'vue'
import App from './App.vue'

import UIkit from 'uikit'
// @ts-ignore
// the ts error: TS7016: Could not find a declaration file for module 'uikit/dist/js/uikit-icons'. '.../node_modules/uikit/dist/js/uikit-icons.js' implicitly has an 'any' type.
import Icons from 'uikit/dist/js/uikit-icons';

// @ts-ignore
// the ts error: This expression is not callable. Type '{}' has no call signatures.
UIkit.use(Icons);

createApp(App).mount('#app')

I haven't changed my index.html file from the state that it was in when created.

Edit: It seems that the icons that cannot be found are part of a less file. For example, the accordion.less file is located at node_modules/uikit/src/less/components/accordion.less. Inside that file, a variable @internal-accordion-open-image is defined as "../../images/backgrounds/accordion-open.svg", which points to the icon I'm missing (and that cannot be found).

Schottky
  • 1,549
  • 1
  • 4
  • 19
  • Yeah that's pretty self-explanatory. The code cannot find `import Icons from 'uikit/dist/js/uikit-icons';` and that's why it returns a `404` error when you ignore that line, I think. – cSharp May 18 '22 at 06:31
  • The thing is that normal icons work fine. When I remove that line of code, I don't see icons that I create 'normally', i.e. using the `span` directive – Schottky May 18 '22 at 06:40
  • and if you ignore the error and `import Icons`, you can use some icons but not others? – cSharp May 18 '22 at 06:50
  • What about including `script defer` tags on your `index.html` instead of using installed one? The UI Kit website seems to be built that way. – cSharp May 18 '22 at 06:53
  • First comment: exactly. Second comment: Tried that but without any success. Looking closer into the problem, it seems that the icons that cannot be found are part of a `.less` file. I'll update my question with the relevant parts. – Schottky May 18 '22 at 07:12
  • 1
    I have found a solution to my problem and therefore think this can be closed as a duplicate – Schottky May 18 '22 at 07:54

0 Answers0