TypeScript support about vue-material-design-icons

[susnux]

I think you can add something like this to your project in a global.d.ts:

declare module 'vue-material-design-icons/*.vue' {
	import type { DefineComponent } from 'vue'

	const IconVue : DefineComponent<
		{
			/// `size` defaults to 24
			size: number,
			/// `fillColor` defaults to 'currentColor'
			fillColor: string,
			title?: string,
		}>
	export default IconVue
}

Should work with vue 2.7 and vue 3

[VanGorg]

@Howard-Lam-UnitedVanning
I just faced the same problem and got it working by declaring size and fillcolor as optional. So the file contents are now

declare module 'vue-material-design-icons/*.vue' {
  import type { DefineComponent } from 'vue';

  const IconVue: DefineComponent<{
    /// `size` defaults to 24
    size?: number;
    /// `fillColor` defaults to 'currentColor'
    fillColor?: string;
    title?: string;
  }>;
  export default IconVue;
}

Calling this file 'global.d.ts' strangely didn't work. It only worked after I prefixed it with 'shims'; now it is called 'shims-vue-mat-icons.d.ts' and sits at project root. This way, things finally work out without errors.

Thanks for your suggestion, @susnux

[Howard-Lam-UnitedVanning]

@susnux I get the following error with your solution in the template
Argument of type '{}' is not assignable to parameter of type '{ readonly size: number; readonly fillColor: string; readonly title?: string | undefined; style?: unknown; key?: string | number | symbol | undefined; ref?: VNodeRef | undefined; ... 8 more ...; class?: unknown; } & Record<...>'.
Type '{}' is missing the following properties from type '{ readonly size: number; readonly fillColor: string; readonly title?: string | undefined; style?: unknown; key?: string | number | symbol | undefined; ref?: VNodeRef | undefined; ref_for?: boolean | undefined; ... 7 more ...; class?: unknown; }': size, fillColor

example : <ChevronUp />
and it shows on ChevronUp