【SharePoint】タイル風にカスタマイズしたビューを、ページに表示させる

以前、ビューの書式設定をカスタマイズして「リストアイテムをタイル風に表示させる」という記事を掲載しました。

mynote365.hatenadiary.com

こちらの書式設定を適用したリストを、Webパーツを利用してページに表示させると、以下のようにアイコンが小さくなってしまったり、文字色が異なってしまう現象が発生してしまいます。
しがっくま@MS365 (@RYO0305) / Twitter さんからこの現象について教えていただきました。)

こちらの現象を回避するようなコードを作成してみました。

修正してみた書式設定のコード

以下は、修正してみたビューの書式設定のコードです。

アイコンの大きさを変えたい場合は、画像の赤枠の場所の値を変更をお願いいたします。

補足:色について

SharePointで使用されている色は、以下に掲載されています。
文字色の設定するときに参考にしてみてください。

developer.microsoft.com