Added image component that centers images in mdx

packages/website/mdx/core-concepts/index.mdx

@@ -131,7 +131,7 @@ By design, the 0x protocol is built to be highly modular and extensible. Some ch
 
 Another type of the 0x protocol extension that does not require any kind of approval to be used are aptly called [0x extensions](https://0x.org/extensions). 0x extensions add arbitrary logic that 0x orders must flow through before they can get filled or cancelled.
 
-![](https://i.imgur.com/gE6jLCc.png)
+![Extension](/images/docs/extension.png "Extension")
 
 Examples of the types of features this enables are trading whitelists (KYC, invite-only, etc...), Dutch auctions and [trade coordinators](https://github.com/0xProject/0x-protocol-specification/blob/master/v2/coordinator-specification.md) to name a few. We are just beginning to see the innovation this ability to permissionlessly extend the 0x protocol will unleash.
 

packages/website/ts/components/docs/mdx/image.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export interface IImageProps {
+    src: string;
+    alt?: string;
+    title?: string;
+}
+
+export const Image: React.FC<IImageProps> = props => (
+    <ImageWrapper>
+        <ImageElement {...props} />
+    </ImageWrapper>
+);
+
+const ImageWrapper = styled.span`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+const ImageElement = styled.img``;

packages/website/ts/pages/docs/page.tsx

@@ -11,6 +11,7 @@ import { Emphasis } from 'ts/components/docs/mdx/emphasis';
 import { H1, H2, H3, H4, H5, H6 } from 'ts/components/docs/mdx/headings';
 import { HelpCallout } from 'ts/components/docs/mdx/help_callout';
 import { HelpfulCta } from 'ts/components/docs/mdx/helpful_cta';
+import { Image } from 'ts/components/docs/mdx/image';
 import { InlineCode } from 'ts/components/docs/mdx/inline_code';
 import { InlineLink } from 'ts/components/docs/mdx/inline_link';
 import { NewsletterWidget } from 'ts/components/docs/mdx/newsletter_widget';
@@ -146,6 +147,7 @@ export const DocsPage: React.FC<IDocsPageProps> = props => {
 };
 
 const mdxComponents = {
+    a: InlineLink,
     code: Code,
     em: Emphasis,
     h1: H1,
@@ -155,8 +157,8 @@ const mdxComponents = {
     h5: H5,
     h6: H6,
     hr: Separator,
+    img: Image,
     inlineCode: InlineCode,
-    a: InlineLink,
     ol: OrderedList,
     p: Paragraph,
     table: Table,