TypeScript support

[vinicios-gomes]

It would be very beneficial to add TypeScript support via a declaration file. I'm currently working on a TypeScript-based Vue.js application. Personally, I feel much more comfortable with TS than with simple JS and I believe I can also support other application developers when they think about using this shared component library.

[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

[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

[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