Import CoreUI icons into Vue.js TypeScript project

user_1995052 0
Viewed 1284

I'm building a Vue.js app with CoreUI in TypeScript. The problem I currently have is related to CoreUI's icons. My application runs fine and renders the icons, but VSC complains about the specific line:

icons: { cilHome, cilSettings },

Here is the entire code of my main.ts:

import Vue from "vue";
import App from "./App.vue";
import CoreuiVue from "@coreui/vue";
import { cilPencil, cilSettings } from "@coreui/icons";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

Vue.use(CoreuiVue);

new Vue({
  router,
  store,
  icons: { cilPencil, cilSettings },
  render: h => h(App)
}).$mount("#app");

VSC error text:

No overload matches this call. Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps | undefined): CombinedVueInstance>', gave the following error. Argument of type '{ router: VueRouter; store: Store; icons: { cilHome: string[]; cilSettings: string[]; }; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps'. Object literal may only specify known properties, and 'icons' does not exist in type 'ThisTypedComponentOptionsWithArrayProps'. Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps | undefined): CombinedVueInstance>', gave the following error. Argument of type '{ router: VueRouter; store: Store; icons: { cilHome: string[]; cilSettings: string[]; }; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps'. Object literal may only specify known properties, and 'icons' does not exist in type 'ThisTypedComponentOptionsWithRecordProps'. Overload 3 of 3, '(options?: ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>> | undefined): CombinedVueInstance<...>', gave the following error. Argument of type '{ router: VueRouter; store: Store; icons: { cilHome: string[]; cilSettings: string[]; }; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'. Object literal may only specify known properties, and 'icons' does not exist in type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'.ts(2769) Peek Problem No quick fixes available

I assume it's a TypeScript type issue, since the code is built with no issues in EcmaScript: https://github.com/coreui/coreui-free-vue-admin-template. I would really appreciate if you could share your experience with such issues. Thank you!

core-ui vue.js typescript icons
1 Answers

I was able to resolve the error, by creating a custom type file xxx.d.ts:

import Vue, { ComponentOptions } from "vue";

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    icons?: any;
  }
}
user_19950520
Related