fix: Restore Image component for svg and gif support

Author: icaraps

example/src/pages/creative_cloud/index.md

@@ -7,7 +7,7 @@ description: This is the home page of Creative Cloud
 
 ![Creative Cloud banner](images/cc-hero.png)
 
-![Creative Cloud icon](images/cc-icon.png)
+![Creative Cloud icon](https://adobe.io/shared/icons/cc_appicon_64.svg)
 
 # Creativity for all
 
@@ -44,7 +44,7 @@ Be sure to check out [Common Extensibility Platform (CEP)](https://www.adobe.io/
 When you're ready to ship, distribute your work on [Adobe Exchange](https://exchange.adobe.com/), the preferred marketplace for Adobe Creative Cloud users.
 And be sure to join the [Exchange Program for Creative Cloud](https://partners.adobe.com/exchangeprogram/creativecloud) to unlock more benefits, including streamlined publishing and promotional opportunities.
 
-* ![Adobe Premiere Pro](images/pr-icon.png) [Adobe Premiere Pro](https://www.adobe.com/products/premiere.html)
+* ![Adobe Premiere Pro](https://adobe.io/shared/icons/pr_appicon_64.svg) [Adobe Premiere Pro](https://www.adobe.com/products/premiere.html)
 * ![Adobe InDesign](images/ai-icon.png) [Adobe InDesign](https://www.adobe.com/products/indesign.html)
 * ![Adobe After Effect](images/ae-icon.png) [Adobe After Effect](https://www.adobe.com/products/aftereffects.html)   
 
@@ -79,7 +79,7 @@ With the Cloud Content APIs, you can bring design work created in XD directly to
 
 <TextBlock slots="image, heading, text, links" width="33%" theme="light" isCentered />
 
-![MSFT Teams logo](images/msfteams.png)
+![CC logo](https://adobe.io/shared/icons/cc_appicon_64.svg)
 
 ### Microsoft teams
 
@@ -121,7 +121,7 @@ Instantly share Creative Cloud files, designs, specs, and notifications all in r
 [Creative Cloud for a new era](https://www.youtube.com/watch?v=JemJbNJ4ZtU&ab_channel=AdobeCreativeCloud)
 
 * ![Adobe](images/adobe.png)
-* ![Microsoft](images/msft.png)
+* ![CC](https://adobe.io/shared/icons/cc_appicon_64.svg)
 
 ### Partner Success Story
 
@@ -247,7 +247,7 @@ Rob Kleiman, July 8th 2020
 
 <ProductCard slots="icon, heading, text, buttons" theme="light" />
 
-![CC icon](images/cc-icon.png)
+![CC icon](https://adobe.io/shared/icons/cc_appicon_64.svg)
 
 #### CC Storage API
 

example/src/products/index.js

@@ -44,7 +44,7 @@ const products = [
     id: 0,
     name: 'Adobe Creative Cloud',
     description: 'Adobe Creative Cloud APIs and SDKs enable developers to impact creative work for millions of users worldwide. Build and distribute inspiring, productivity-driving plugins and integrations—all with Adobe Creative Cloud.',
-    icon: CC,
+    icon: 'https://adobe.io/shared/icons/cc_appicon_64.svg',
     discover: '/creative-cloud',
     docs: false,
     lastUpdated: '2020',

packages/gatsby-theme-aio/src/components/Contributors/index.js

@@ -12,6 +12,7 @@
 
 import React from 'react';
 import { css } from '@emotion/react';
+import { Image } from '../Image';
 import PropTypes from 'prop-types';
 import { getExternalLinkProps } from '../../utils';
 
@@ -58,15 +59,11 @@ const Contributors = ({ repository, branch, root, pagePath, contributors = [], e
                   height: var(--spectrum-global-dimension-size-400);
                   border-radius: var(--spectrum-global-dimension-static-percent-50);
                   background: var(--spectrum-global-color-gray-50);
+                  overflow: hidden;
                 `}>
-                <img
+                <Image
                   alt={contributor.name || contributor.login}
                   src={`https://github.com/${contributor.login}.png`}
-                  css={css`
-                    width: var(--spectrum-global-dimension-size-400);
-                    height: var(--spectrum-global-dimension-size-400);
-                    border-radius: var(--spectrum-global-dimension-static-percent-50);
-                  `}
                 />
               </span>
             ))}

packages/gatsby-theme-aio/src/components/Image/index.js

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import React from 'react';
+import { css } from '@emotion/react';
+import { LARGE_SCREEN_WIDTH } from '../../utils';
+
+export const Image = (props) => {
+  // Check if gatsby-remark-images-remote processing was skipped
+  if (!props.src || props.src.endsWith('.svg') || props.src.endsWith('.gif') || !props.loading) {
+    // Defaults to same as gatsby-remark-images-remote loading config
+    props.loading = props.loading || 'lazy';
+
+    // Recreate gatsby-remark-images-remote styles and classes
+    return (
+      <span
+        className="gatsby-resp-image-wrapper"
+        css={css`
+          position: relative;
+          display: block;
+          margin-left: auto;
+          margin-right: auto;
+          max-width: ${LARGE_SCREEN_WIDTH};
+        `}>
+        <span
+          className="gatsby-resp-image-background-image"
+          css={css`
+            display: block;
+            position: relative;
+            bottom: 0;
+            left: 0;
+            padding-bottom: 100%;
+          `}
+        />
+        <img
+          {...props}
+          className="gatsby-resp-image-image"
+          css={css`
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            vertical-align: middle;
+            position: absolute;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            transition: opacity 0.5s ease 0s;
+          `}
+        />
+      </span>
+    );
+  }
+
+  return <img {...props} />;
+};

packages/gatsby-theme-aio/src/components/MDXFilter/MDXComponents.js

@@ -19,6 +19,7 @@ import { Paragraph } from '../Paragraph';
 import { List } from '../List';
 import { Code } from '../Code';
 import { InlineCode } from '../InlineCode';
+import { Image } from '../Image';
 import { Table, TBody, Td, Th, THead, Tr } from '../Table';
 
 export const MDXComponents = {
@@ -42,6 +43,7 @@ export const MDXComponents = {
   ),
   inlineCode: InlineCode,
   a: AnchorLink,
+  img: Image,
   table: Table,
   tbody: TBody,
   th: Th,

packages/gatsby-theme-aio/src/components/ProductCardGrid/index.js

@@ -19,6 +19,7 @@ import { Checkbox } from '../Checkbox';
 import { Picker } from '../Picker';
 import '@spectrum-css/typography';
 import '@spectrum-css/card';
+import { Image } from '../Image';
 import { LARGE_SCREEN_WIDTH } from '../../utils';
 import PropTypes from 'prop-types';
 
@@ -237,16 +238,7 @@ const ProductCardGrid = ({
                           width: var(--spectrum-global-dimension-size-600);
                           margin-bottom: var(--spectrum-global-dimension-size-200);
                         `}>
-                        <img
-                          css={css`
-                            display: block;
-                            height: 100%;
-                            object-fit: contain;
-                          `}
-                          src={product.icon}
-                          alt=""
-                          aria-hidden="true"
-                        />
+                        <Image src={product.icon} aria-hidden="true" alt="" />
                       </div>
                     )}
                   </div>