From bb2ce19677e2852de2d1142f9dbb16d07283ce76 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 1 Sep 2022 15:31:29 -0400
Subject: [PATCH 1/3] docs(thumbnail): add component playgrounds and new svg

---
 docs/api/thumbnail.md                         | 148 ++----------------
 static/demos/api/skeleton-text/thumbnail.svg  |  15 +-
 static/demos/api/thumbnail/thumbnail.svg      |  15 +-
 static/usage/thumbnail/basic/angular.md       |   5 +
 static/usage/thumbnail/basic/demo.html        |  27 ++++
 static/usage/thumbnail/basic/index.md         |   8 +
 static/usage/thumbnail/basic/javascript.md    |   5 +
 static/usage/thumbnail/basic/react.md         |  15 ++
 static/usage/thumbnail/basic/vue.md           |  16 ++
 static/usage/thumbnail/item/angular.md        |   8 +
 static/usage/thumbnail/item/demo.html         |  30 ++++
 static/usage/thumbnail/item/index.md          |   8 +
 static/usage/thumbnail/item/javascript.md     |   8 +
 static/usage/thumbnail/item/react.md          |  18 +++
 static/usage/thumbnail/item/vue.md            |  19 +++
 static/usage/thumbnail/theming/angular.md     |   5 +
 .../theming/angular/example_component_css.md  |   7 +
 .../theming/angular/example_component_html.md |   6 +
 static/usage/thumbnail/theming/demo.html      |  33 ++++
 static/usage/thumbnail/theming/index.md       |  32 ++++
 static/usage/thumbnail/theming/javascript.md  |  12 ++
 .../usage/thumbnail/theming/react/main_css.md |   6 +
 .../usage/thumbnail/theming/react/main_tsx.md |  18 +++
 static/usage/thumbnail/theming/vue.md         |  23 +++
 24 files changed, 347 insertions(+), 140 deletions(-)
 create mode 100644 static/usage/thumbnail/basic/angular.md
 create mode 100644 static/usage/thumbnail/basic/demo.html
 create mode 100644 static/usage/thumbnail/basic/index.md
 create mode 100644 static/usage/thumbnail/basic/javascript.md
 create mode 100644 static/usage/thumbnail/basic/react.md
 create mode 100644 static/usage/thumbnail/basic/vue.md
 create mode 100644 static/usage/thumbnail/item/angular.md
 create mode 100644 static/usage/thumbnail/item/demo.html
 create mode 100644 static/usage/thumbnail/item/index.md
 create mode 100644 static/usage/thumbnail/item/javascript.md
 create mode 100644 static/usage/thumbnail/item/react.md
 create mode 100644 static/usage/thumbnail/item/vue.md
 create mode 100644 static/usage/thumbnail/theming/angular.md
 create mode 100644 static/usage/thumbnail/theming/angular/example_component_css.md
 create mode 100644 static/usage/thumbnail/theming/angular/example_component_html.md
 create mode 100644 static/usage/thumbnail/theming/demo.html
 create mode 100644 static/usage/thumbnail/theming/index.md
 create mode 100644 static/usage/thumbnail/theming/javascript.md
 create mode 100644 static/usage/thumbnail/theming/react/main_css.md
 create mode 100644 static/usage/thumbnail/theming/react/main_tsx.md
 create mode 100644 static/usage/thumbnail/theming/vue.md

diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md
index 77ef73f041c..21b640a3b54 100644
--- a/docs/api/thumbnail.md
+++ b/docs/api/thumbnail.md
@@ -1,11 +1,6 @@
 ---
 title: "ion-thumbnail"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/thumbnail/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/thumbnail/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
 
 import Props from '@site/static/auto-generated/thumbnail/props.md';
 import Events from '@site/static/auto-generated/thumbnail/events.md';
@@ -20,153 +15,30 @@ import Slots from '@site/static/auto-generated/thumbnail/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 Thumbnails are square components that usually wrap an image or icon. They can be used to make it easier to display a group of larger images or provide a preview of the full-size image.
 
 Thumbnails can be used by themselves or inside of any element. If placed inside of an `ion-item`, the thumbnail will resize to fit the parent component. To position a thumbnail on the left or right side of an item, set the slot to `start` or `end`, respectively.
 
+## Basic
 
+import Basic from '@site/static/usage/thumbnail/basic/index.md';
 
+<Basic />
 
-## Usage
-
-<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
-
-<TabItem value="angular">
-
-```html
-<ion-thumbnail>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-thumbnail>
-
-<ion-item>
-  <ion-thumbnail slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-thumbnail>
-  <ion-label>Item Thumbnail</ion-label>
-</ion-item>
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-thumbnail>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-thumbnail>
-
-<ion-item>
-  <ion-thumbnail slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-thumbnail>
-  <ion-label>Item Thumbnail</ion-label>
-</ion-item>
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonThumbnail, IonItem, IonLabel, IonContent } from '@ionic/react';
-
-export const ThumbnailExample: React.FC = () => (
-  <IonContent>
-    <IonThumbnail>
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-    </IonThumbnail>
-
-    <IonItem>
-      <IonThumbnail slot="start">
-        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-      </IonThumbnail>
-      <IonLabel>Item Thumbnail</IonLabel>
-    </IonItem>
-  </IonContent>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'thumbnail-example',
-  styleUrl: 'thumbnail-example.css'
-})
-export class ThumbnailExample {
-  render() {
-    return [
-      <ion-thumbnail>
-        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-      </ion-thumbnail>,
-
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-        </ion-thumbnail>
-        <ion-label>Item Thumbnail</ion-label>
-      </ion-item>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-thumbnail>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-thumbnail>
+## Item Thumbnails
 
-  <ion-item>
-    <ion-thumbnail slot="start">
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-    </ion-thumbnail>
-    <ion-label>Item Thumbnail</ion-label>
-  </ion-item>
-</template>
+import Item from '@site/static/usage/thumbnail/item/index.md';
 
-<script>
-import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
-import { defineComponent } from 'vue';
+<Item />
 
-export default defineComponent({
-  components: { IonItem, IonLabel, IonThumbnail }
-});
-</script>
-```
+## Theming
 
-</TabItem>
+import Theming from '@site/static/usage/thumbnail/theming/index.md';
 
-</Tabs>
+<Theming />
 
 ## Properties
 <Props />
@@ -184,4 +56,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/demos/api/skeleton-text/thumbnail.svg b/static/demos/api/skeleton-text/thumbnail.svg
index dafcf4c1751..bc5622b74fa 100644
--- a/static/demos/api/skeleton-text/thumbnail.svg
+++ b/static/demos/api/skeleton-text/thumbnail.svg
@@ -1 +1,14 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 512 512" xml:space="preserve"><style>.st1{fill:#82aeff}</style><path fill="#c5dbff" d="M0 0h512v512H0z"/><path class="st1" d="M256 165.8c-49.9 0-90.3 40.4-90.3 90.3s40.4 90.2 90.3 90.2 90.3-40.4 90.3-90.2c0-49.9-40.4-90.3-90.3-90.3zm0 130.6c-22.3 0-40.4-18.1-40.4-40.4s18.1-40.4 40.4-40.4 40.4 18.1 40.4 40.4-18.1 40.4-40.4 40.4z"/><path class="st1" d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm0 322c-63 0-114-51.1-114-114 0-63 51.1-114 114-114s114 51 114 114-51 114-114 114z"/></svg>
\ No newline at end of file
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1765_7058)">
+<path d="M0 0H512V512H0V0Z" fill="#D7DDE2"/>
+<g opacity="0.8">
+<path d="M256 176C211.792 176 176 211.812 176 256.044C176 300.277 211.792 336 256 336C300.208 336 336 300.188 336 256.044C336 211.812 300.208 176 256 176Z" fill="#222D3A"/>
+<path d="M256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48ZM256 370C193 370 142 318.9 142 256C142 193 193.1 142 256 142C318.9 142 370 193 370 256C370 319 319 370 256 370Z" fill="#222D3A"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1765_7058">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/demos/api/thumbnail/thumbnail.svg b/static/demos/api/thumbnail/thumbnail.svg
index dafcf4c1751..bc5622b74fa 100644
--- a/static/demos/api/thumbnail/thumbnail.svg
+++ b/static/demos/api/thumbnail/thumbnail.svg
@@ -1 +1,14 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 512 512" xml:space="preserve"><style>.st1{fill:#82aeff}</style><path fill="#c5dbff" d="M0 0h512v512H0z"/><path class="st1" d="M256 165.8c-49.9 0-90.3 40.4-90.3 90.3s40.4 90.2 90.3 90.2 90.3-40.4 90.3-90.2c0-49.9-40.4-90.3-90.3-90.3zm0 130.6c-22.3 0-40.4-18.1-40.4-40.4s18.1-40.4 40.4-40.4 40.4 18.1 40.4 40.4-18.1 40.4-40.4 40.4z"/><path class="st1" d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm0 322c-63 0-114-51.1-114-114 0-63 51.1-114 114-114s114 51 114 114-51 114-114 114z"/></svg>
\ No newline at end of file
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1765_7058)">
+<path d="M0 0H512V512H0V0Z" fill="#D7DDE2"/>
+<g opacity="0.8">
+<path d="M256 176C211.792 176 176 211.812 176 256.044C176 300.277 211.792 336 256 336C300.208 336 336 300.188 336 256.044C336 211.812 300.208 176 256 176Z" fill="#222D3A"/>
+<path d="M256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48ZM256 370C193 370 142 318.9 142 256C142 193 193.1 142 256 142C318.9 142 370 193 370 256C370 319 319 370 256 370Z" fill="#222D3A"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1765_7058">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/usage/thumbnail/basic/angular.md b/static/usage/thumbnail/basic/angular.md
new file mode 100644
index 00000000000..0cecc35c686
--- /dev/null
+++ b/static/usage/thumbnail/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-thumbnail>
+  <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+</ion-thumbnail>
+```
diff --git a/static/usage/thumbnail/basic/demo.html b/static/usage/thumbnail/basic/demo.html
new file mode 100644
index 00000000000..445aac119e2
--- /dev/null
+++ b/static/usage/thumbnail/basic/demo.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Thumbnail</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-thumbnail>
+          <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+        </ion-thumbnail>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/thumbnail/basic/index.md b/static/usage/thumbnail/basic/index.md
new file mode 100644
index 00000000000..221786ddeee
--- /dev/null
+++ b/static/usage/thumbnail/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/thumbnail/basic/demo.html" />
diff --git a/static/usage/thumbnail/basic/javascript.md b/static/usage/thumbnail/basic/javascript.md
new file mode 100644
index 00000000000..0cecc35c686
--- /dev/null
+++ b/static/usage/thumbnail/basic/javascript.md
@@ -0,0 +1,5 @@
+```html
+<ion-thumbnail>
+  <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+</ion-thumbnail>
+```
diff --git a/static/usage/thumbnail/basic/react.md b/static/usage/thumbnail/basic/react.md
new file mode 100644
index 00000000000..da45bfe5148
--- /dev/null
+++ b/static/usage/thumbnail/basic/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonThumbnail } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonThumbnail>
+        <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+      </IonThumbnail>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/thumbnail/basic/vue.md b/static/usage/thumbnail/basic/vue.md
new file mode 100644
index 00000000000..b922dad660f
--- /dev/null
+++ b/static/usage/thumbnail/basic/vue.md
@@ -0,0 +1,16 @@
+```html
+<template>
+  <ion-thumbnail>
+    <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+  </ion-thumbnail>
+</template>
+
+<script lang="ts">
+  import { IonThumbnail } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonThumbnail },
+  });
+</script>
+```
diff --git a/static/usage/thumbnail/item/angular.md b/static/usage/thumbnail/item/angular.md
new file mode 100644
index 00000000000..b7286f0a1bb
--- /dev/null
+++ b/static/usage/thumbnail/item/angular.md
@@ -0,0 +1,8 @@
+```html
+<ion-item>
+  <ion-thumbnail slot="start">
+    <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+  </ion-thumbnail>
+  <ion-label>Item Thumbnail</ion-label>
+</ion-item>
+```
diff --git a/static/usage/thumbnail/item/demo.html b/static/usage/thumbnail/item/demo.html
new file mode 100644
index 00000000000..a9e87f6bb70
--- /dev/null
+++ b/static/usage/thumbnail/item/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Thumbnail</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+          </ion-thumbnail>
+          <ion-label>Item Thumbnail</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/thumbnail/item/index.md b/static/usage/thumbnail/item/index.md
new file mode 100644
index 00000000000..13b7272fa89
--- /dev/null
+++ b/static/usage/thumbnail/item/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/thumbnail/item/demo.html" />
diff --git a/static/usage/thumbnail/item/javascript.md b/static/usage/thumbnail/item/javascript.md
new file mode 100644
index 00000000000..b7286f0a1bb
--- /dev/null
+++ b/static/usage/thumbnail/item/javascript.md
@@ -0,0 +1,8 @@
+```html
+<ion-item>
+  <ion-thumbnail slot="start">
+    <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+  </ion-thumbnail>
+  <ion-label>Item Thumbnail</ion-label>
+</ion-item>
+```
diff --git a/static/usage/thumbnail/item/react.md b/static/usage/thumbnail/item/react.md
new file mode 100644
index 00000000000..57ab6abc470
--- /dev/null
+++ b/static/usage/thumbnail/item/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonThumbnail } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonThumbnail slot="start">
+          <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+        </IonThumbnail>
+        <IonLabel>Item Thumbnail</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/thumbnail/item/vue.md b/static/usage/thumbnail/item/vue.md
new file mode 100644
index 00000000000..f80aa1b268e
--- /dev/null
+++ b/static/usage/thumbnail/item/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-item>
+    <ion-thumbnail slot="start">
+      <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+    </ion-thumbnail>
+    <ion-label>Item Thumbnail</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonThumbnail },
+  });
+</script>
+```
diff --git a/static/usage/thumbnail/theming/angular.md b/static/usage/thumbnail/theming/angular.md
new file mode 100644
index 00000000000..0cecc35c686
--- /dev/null
+++ b/static/usage/thumbnail/theming/angular.md
@@ -0,0 +1,5 @@
+```html
+<ion-thumbnail>
+  <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+</ion-thumbnail>
+```
diff --git a/static/usage/thumbnail/theming/angular/example_component_css.md b/static/usage/thumbnail/theming/angular/example_component_css.md
new file mode 100644
index 00000000000..605855deb77
--- /dev/null
+++ b/static/usage/thumbnail/theming/angular/example_component_css.md
@@ -0,0 +1,7 @@
+
+```css
+ion-thumbnail {
+  --size: 140px;
+  --border-radius: 14px;
+}
+```
diff --git a/static/usage/thumbnail/theming/angular/example_component_html.md b/static/usage/thumbnail/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..e90e238c112
--- /dev/null
+++ b/static/usage/thumbnail/theming/angular/example_component_html.md
@@ -0,0 +1,6 @@
+
+```html
+<ion-thumbnail>
+  <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+</ion-thumbnail>
+```
diff --git a/static/usage/thumbnail/theming/demo.html b/static/usage/thumbnail/theming/demo.html
new file mode 100644
index 00000000000..8a071cdfb68
--- /dev/null
+++ b/static/usage/thumbnail/theming/demo.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Thumbnail</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-thumbnail {
+      --size: 140px;
+      --border-radius: 14px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-thumbnail>
+          <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+        </ion-thumbnail>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/thumbnail/theming/index.md b/static/usage/thumbnail/theming/index.md
new file mode 100644
index 00000000000..8be9b0ddccc
--- /dev/null
+++ b/static/usage/thumbnail/theming/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import reactTSX from './react/main_tsx.md';
+import reactCSS from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angularHTML from './angular/example_component_html.md';
+import angularCSS from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': reactTSX,
+        'src/main.css': reactCSS
+      }
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angularHTML,
+        'src/app/example.component.css': angularCSS
+      }
+    },
+  }}
+  src="usage/thumbnail/theming/demo.html"
+  size="250px"
+/>
diff --git a/static/usage/thumbnail/theming/javascript.md b/static/usage/thumbnail/theming/javascript.md
new file mode 100644
index 00000000000..61e742c20bc
--- /dev/null
+++ b/static/usage/thumbnail/theming/javascript.md
@@ -0,0 +1,12 @@
+```html
+<style>
+  ion-thumbnail {
+    --size: 140px;
+    --border-radius: 14px;
+  }
+</style>
+
+<ion-thumbnail>
+  <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+</ion-thumbnail>
+```
diff --git a/static/usage/thumbnail/theming/react/main_css.md b/static/usage/thumbnail/theming/react/main_css.md
new file mode 100644
index 00000000000..74742dfe9f0
--- /dev/null
+++ b/static/usage/thumbnail/theming/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-thumbnail {
+  --size: 140px;
+  --border-radius: 14px;
+}
+```
diff --git a/static/usage/thumbnail/theming/react/main_tsx.md b/static/usage/thumbnail/theming/react/main_tsx.md
new file mode 100644
index 00000000000..ee65bdccfbd
--- /dev/null
+++ b/static/usage/thumbnail/theming/react/main_tsx.md
@@ -0,0 +1,18 @@
+
+```tsx
+import React from 'react';
+import { IonThumbnail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonThumbnail>
+        <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+      </IonThumbnail>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/thumbnail/theming/vue.md b/static/usage/thumbnail/theming/vue.md
new file mode 100644
index 00000000000..7a1f74bf4a0
--- /dev/null
+++ b/static/usage/thumbnail/theming/vue.md
@@ -0,0 +1,23 @@
+```html
+<style>
+  ion-thumbnail {
+    --size: 140px;
+    --border-radius: 14px;
+  }
+</style>
+
+<template>
+  <ion-thumbnail>
+    <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+  </ion-thumbnail>
+</template>
+
+<script lang="ts">
+  import { IonThumbnail } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonThumbnail },
+  });
+</script>
+```

From 2aae00c34317bb8fc8ebd35e912317f20dab1a3a Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 1 Sep 2022 15:56:48 -0400
Subject: [PATCH 2/3] fix(thumbnail): update svg image

---
 static/demos/api/skeleton-text/thumbnail.svg | 13 ++++++-------
 static/demos/api/thumbnail/thumbnail.svg     | 13 ++++++-------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/static/demos/api/skeleton-text/thumbnail.svg b/static/demos/api/skeleton-text/thumbnail.svg
index bc5622b74fa..b12a43f92a9 100644
--- a/static/demos/api/skeleton-text/thumbnail.svg
+++ b/static/demos/api/skeleton-text/thumbnail.svg
@@ -1,13 +1,12 @@
 <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1765_7058)">
-<path d="M0 0H512V512H0V0Z" fill="#D7DDE2"/>
-<g opacity="0.8">
-<path d="M256 176C211.792 176 176 211.812 176 256.044C176 300.277 211.792 336 256 336C300.208 336 336 300.188 336 256.044C336 211.812 300.208 176 256 176Z" fill="#222D3A"/>
-<path d="M256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48ZM256 370C193 370 142 318.9 142 256C142 193 193.1 142 256 142C318.9 142 370 193 370 256C370 319 319 370 256 370Z" fill="#222D3A"/>
-</g>
+<g clip-path="url(#clip0_1766_3886)">
+<path d="M0 0H512V512H0V0Z" fill="#222D3A"/>
+<path d="M338 195C368.928 195 394 169.928 394 139C394 108.072 368.928 83 338 83C307.072 83 282 108.072 282 139C282 169.928 307.072 195 338 195Z" fill="#C0C8CE"/>
+<path d="M485.5 525L163.495 234.446C156.395 227.347 146.852 223.228 136.816 222.931C126.78 222.633 117.01 226.18 109.502 232.846L-214 525" fill="#B3BAC0"/>
+<path opacity="0.7" d="M120.5 563.5L368.419 312.429C375.361 305.472 384.653 301.363 394.47 300.908C404.288 300.452 413.92 303.684 421.477 309.967L667 514" fill="#B3BAC0"/>
 </g>
 <defs>
-<clipPath id="clip0_1765_7058">
+<clipPath id="clip0_1766_3886">
 <rect width="512" height="512" fill="white"/>
 </clipPath>
 </defs>
diff --git a/static/demos/api/thumbnail/thumbnail.svg b/static/demos/api/thumbnail/thumbnail.svg
index bc5622b74fa..b12a43f92a9 100644
--- a/static/demos/api/thumbnail/thumbnail.svg
+++ b/static/demos/api/thumbnail/thumbnail.svg
@@ -1,13 +1,12 @@
 <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1765_7058)">
-<path d="M0 0H512V512H0V0Z" fill="#D7DDE2"/>
-<g opacity="0.8">
-<path d="M256 176C211.792 176 176 211.812 176 256.044C176 300.277 211.792 336 256 336C300.208 336 336 300.188 336 256.044C336 211.812 300.208 176 256 176Z" fill="#222D3A"/>
-<path d="M256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48ZM256 370C193 370 142 318.9 142 256C142 193 193.1 142 256 142C318.9 142 370 193 370 256C370 319 319 370 256 370Z" fill="#222D3A"/>
-</g>
+<g clip-path="url(#clip0_1766_3886)">
+<path d="M0 0H512V512H0V0Z" fill="#222D3A"/>
+<path d="M338 195C368.928 195 394 169.928 394 139C394 108.072 368.928 83 338 83C307.072 83 282 108.072 282 139C282 169.928 307.072 195 338 195Z" fill="#C0C8CE"/>
+<path d="M485.5 525L163.495 234.446C156.395 227.347 146.852 223.228 136.816 222.931C126.78 222.633 117.01 226.18 109.502 232.846L-214 525" fill="#B3BAC0"/>
+<path opacity="0.7" d="M120.5 563.5L368.419 312.429C375.361 305.472 384.653 301.363 394.47 300.908C404.288 300.452 413.92 303.684 421.477 309.967L667 514" fill="#B3BAC0"/>
 </g>
 <defs>
-<clipPath id="clip0_1765_7058">
+<clipPath id="clip0_1766_3886">
 <rect width="512" height="512" fill="white"/>
 </clipPath>
 </defs>

From 1871f28b0cc9710ee055df0006f299258cc8c3a4 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 1 Sep 2022 16:21:28 -0400
Subject: [PATCH 3/3] fix(demos): update img to include alt text

---
 static/usage/thumbnail/basic/angular.md                         | 2 +-
 static/usage/thumbnail/basic/demo.html                          | 2 +-
 static/usage/thumbnail/basic/javascript.md                      | 2 +-
 static/usage/thumbnail/basic/react.md                           | 2 +-
 static/usage/thumbnail/basic/vue.md                             | 2 +-
 static/usage/thumbnail/item/angular.md                          | 2 +-
 static/usage/thumbnail/item/demo.html                           | 2 +-
 static/usage/thumbnail/item/javascript.md                       | 2 +-
 static/usage/thumbnail/item/react.md                            | 2 +-
 static/usage/thumbnail/item/vue.md                              | 2 +-
 static/usage/thumbnail/theming/angular.md                       | 2 +-
 .../usage/thumbnail/theming/angular/example_component_html.md   | 2 +-
 static/usage/thumbnail/theming/demo.html                        | 2 +-
 static/usage/thumbnail/theming/javascript.md                    | 2 +-
 static/usage/thumbnail/theming/react/main_tsx.md                | 2 +-
 static/usage/thumbnail/theming/vue.md                           | 2 +-
 16 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/static/usage/thumbnail/basic/angular.md b/static/usage/thumbnail/basic/angular.md
index 0cecc35c686..6e388336952 100644
--- a/static/usage/thumbnail/basic/angular.md
+++ b/static/usage/thumbnail/basic/angular.md
@@ -1,5 +1,5 @@
 ```html
 <ion-thumbnail>
-  <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
 </ion-thumbnail>
 ```
diff --git a/static/usage/thumbnail/basic/demo.html b/static/usage/thumbnail/basic/demo.html
index 445aac119e2..d5bdb920fe4 100644
--- a/static/usage/thumbnail/basic/demo.html
+++ b/static/usage/thumbnail/basic/demo.html
@@ -17,7 +17,7 @@
     <ion-content>
       <div class="container">
         <ion-thumbnail>
-          <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
         </ion-thumbnail>
       </div>
     </ion-content>
diff --git a/static/usage/thumbnail/basic/javascript.md b/static/usage/thumbnail/basic/javascript.md
index 0cecc35c686..6e388336952 100644
--- a/static/usage/thumbnail/basic/javascript.md
+++ b/static/usage/thumbnail/basic/javascript.md
@@ -1,5 +1,5 @@
 ```html
 <ion-thumbnail>
-  <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
 </ion-thumbnail>
 ```
diff --git a/static/usage/thumbnail/basic/react.md b/static/usage/thumbnail/basic/react.md
index da45bfe5148..cfd6d629ee8 100644
--- a/static/usage/thumbnail/basic/react.md
+++ b/static/usage/thumbnail/basic/react.md
@@ -6,7 +6,7 @@ function Example() {
   return (
     <>
       <IonThumbnail>
-        <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
       </IonThumbnail>
     </>
   );
diff --git a/static/usage/thumbnail/basic/vue.md b/static/usage/thumbnail/basic/vue.md
index b922dad660f..8ef56dfa2c8 100644
--- a/static/usage/thumbnail/basic/vue.md
+++ b/static/usage/thumbnail/basic/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-thumbnail>
-    <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
   </ion-thumbnail>
 </template>
 
diff --git a/static/usage/thumbnail/item/angular.md b/static/usage/thumbnail/item/angular.md
index b7286f0a1bb..5b724820494 100644
--- a/static/usage/thumbnail/item/angular.md
+++ b/static/usage/thumbnail/item/angular.md
@@ -1,7 +1,7 @@
 ```html
 <ion-item>
   <ion-thumbnail slot="start">
-    <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
   </ion-thumbnail>
   <ion-label>Item Thumbnail</ion-label>
 </ion-item>
diff --git a/static/usage/thumbnail/item/demo.html b/static/usage/thumbnail/item/demo.html
index a9e87f6bb70..db7778adda6 100644
--- a/static/usage/thumbnail/item/demo.html
+++ b/static/usage/thumbnail/item/demo.html
@@ -18,7 +18,7 @@
       <div class="container">
         <ion-item>
           <ion-thumbnail slot="start">
-            <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
           </ion-thumbnail>
           <ion-label>Item Thumbnail</ion-label>
         </ion-item>
diff --git a/static/usage/thumbnail/item/javascript.md b/static/usage/thumbnail/item/javascript.md
index b7286f0a1bb..5b724820494 100644
--- a/static/usage/thumbnail/item/javascript.md
+++ b/static/usage/thumbnail/item/javascript.md
@@ -1,7 +1,7 @@
 ```html
 <ion-item>
   <ion-thumbnail slot="start">
-    <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
   </ion-thumbnail>
   <ion-label>Item Thumbnail</ion-label>
 </ion-item>
diff --git a/static/usage/thumbnail/item/react.md b/static/usage/thumbnail/item/react.md
index 57ab6abc470..6d1d3dafea3 100644
--- a/static/usage/thumbnail/item/react.md
+++ b/static/usage/thumbnail/item/react.md
@@ -7,7 +7,7 @@ function Example() {
     <>
       <IonItem>
         <IonThumbnail slot="start">
-          <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
         </IonThumbnail>
         <IonLabel>Item Thumbnail</IonLabel>
       </IonItem>
diff --git a/static/usage/thumbnail/item/vue.md b/static/usage/thumbnail/item/vue.md
index f80aa1b268e..a791dd166f1 100644
--- a/static/usage/thumbnail/item/vue.md
+++ b/static/usage/thumbnail/item/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-item>
     <ion-thumbnail slot="start">
-      <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
     </ion-thumbnail>
     <ion-label>Item Thumbnail</ion-label>
   </ion-item>
diff --git a/static/usage/thumbnail/theming/angular.md b/static/usage/thumbnail/theming/angular.md
index 0cecc35c686..6e388336952 100644
--- a/static/usage/thumbnail/theming/angular.md
+++ b/static/usage/thumbnail/theming/angular.md
@@ -1,5 +1,5 @@
 ```html
 <ion-thumbnail>
-  <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
 </ion-thumbnail>
 ```
diff --git a/static/usage/thumbnail/theming/angular/example_component_html.md b/static/usage/thumbnail/theming/angular/example_component_html.md
index e90e238c112..2e3429d7831 100644
--- a/static/usage/thumbnail/theming/angular/example_component_html.md
+++ b/static/usage/thumbnail/theming/angular/example_component_html.md
@@ -1,6 +1,6 @@
 
 ```html
 <ion-thumbnail>
-  <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
 </ion-thumbnail>
 ```
diff --git a/static/usage/thumbnail/theming/demo.html b/static/usage/thumbnail/theming/demo.html
index 8a071cdfb68..37b245dda91 100644
--- a/static/usage/thumbnail/theming/demo.html
+++ b/static/usage/thumbnail/theming/demo.html
@@ -23,7 +23,7 @@
     <ion-content>
       <div class="container">
         <ion-thumbnail>
-          <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
         </ion-thumbnail>
       </div>
     </ion-content>
diff --git a/static/usage/thumbnail/theming/javascript.md b/static/usage/thumbnail/theming/javascript.md
index 61e742c20bc..05de3080310 100644
--- a/static/usage/thumbnail/theming/javascript.md
+++ b/static/usage/thumbnail/theming/javascript.md
@@ -7,6 +7,6 @@
 </style>
 
 <ion-thumbnail>
-  <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
 </ion-thumbnail>
 ```
diff --git a/static/usage/thumbnail/theming/react/main_tsx.md b/static/usage/thumbnail/theming/react/main_tsx.md
index ee65bdccfbd..c90a1cc2b68 100644
--- a/static/usage/thumbnail/theming/react/main_tsx.md
+++ b/static/usage/thumbnail/theming/react/main_tsx.md
@@ -9,7 +9,7 @@ function Example() {
   return (
     <>
       <IonThumbnail>
-        <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
       </IonThumbnail>
     </>
   );
diff --git a/static/usage/thumbnail/theming/vue.md b/static/usage/thumbnail/theming/vue.md
index 7a1f74bf4a0..e59d386f22a 100644
--- a/static/usage/thumbnail/theming/vue.md
+++ b/static/usage/thumbnail/theming/vue.md
@@ -8,7 +8,7 @@
 
 <template>
   <ion-thumbnail>
-    <img src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg">
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
   </ion-thumbnail>
 </template>