Example of getting OneDrive thumbnail URL for SharePoint List Item using method from modern list tile view

ThumbnailService.ts

import { Web } from "sp-pnp-js";

export default class ThumbnailService {
    public async getThumbnailUrl(
        webUrl: string,
        listId: string,
        listItemId: number,
        width: number,
        height: number
    ): Promise<string> {
        const viewXml: string = `
            <View Scope='RecursiveAll'>
                <Query>
                    <Where>
                        <Eq>
                            <FieldRef Name='ID' />
                            <Value Type='Counter'>${listItemId}</Value>
                        </Eq>
                    </Where>
                </Query>
                <ViewFields>
                    <FieldRef Name='ContentType'/>
                    <FieldRef Name='DocIcon'/>
                    <FieldRef Name='PreviewOnForm' Explicit='TRUE'/>
                    <FieldRef Name='ThumbnailOnForm' Explicit='TRUE'/>
                </ViewFields>
                <RowLimit>1</RowLimit>
            </View>`;
        const web = new Web(webUrl);
        const listData = await web.lists.getById(listId).renderListDataAsStream({ RenderOptions: 4103, ViewXml: viewXml });
        const item = (listData.ListData.Row as any[])[0];
        if (!item) {
            return null;
        }
        return `${(listData.ListSchema[".thumbnailUrl"] as string)
            .replace("{.mediaBaseUrl}", listData.ListSchema[".mediaBaseUrl"])
            .replace("{.fileType}", item[".fileType"])
            .replace("{.callerStack}", listData.ListSchema[".callerStack"])
            .replace("{.spItemUrl}", item[".spItemUrl"])
            .replace("{.driveAccessToken}", listData.ListSchema[".driveAccessToken"])}&width=${width}&height=${height}&cropMode=dochead`;
    }
}