Icons not shown for controls

25 Views Asked by At

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).

0

There are 0 best solutions below