import { Image } from 'theme-ui'
<Image src="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2F%257Bimages.flatiron%257D%2520%2F%26gt%3B%253C%2Ftextarea"><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem"><div class="token-line"><span class="token tag punctuation"><</span><span class="token tag class-name">Image</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">images</span><span class="token tag script language-javascript punctuation">.</span><span class="token tag script language-javascript property-access">flatiron</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag"> </span><span class="token tag punctuation">/></span></div></pre><style type="text/css"> /** * Reset the text fill color so that placeholder is visible */ .npm__react-simple-code-editor__textarea:empty { -webkit-text-fill-color: inherit !important; } /** * Hack to apply on some CSS on IE10 and IE11 */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /** * IE doesn't support '-webkit-text-fill-color' * So we use 'color: transparent' to make the text transparent on IE * Unlike other browsers, it doesn't affect caret color in IE */ .npm__react-simple-code-editor__textarea { color: transparent !important; } .npm__react-simple-code-editor__textarea::selection { background-color: #accef7 !important; color: transparent !important; } } </style></div></pre> <div class="css-1ecoh6f"><div></div></div><pre class="css-1rmn5qa"><div code="<Image src="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2F%257Bimages.logo%257D%2520variant%3D%26quot%3Bavatar%26quot%3B%2520%2F%26gt%3B" language="jsx" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:inherit"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false"><Image src="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2F%257Bimages.logo%257D%2520variant%3D%26quot%3Bavatar%26quot%3B%2520%2F%26gt%3B%253C%2Ftextarea"><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:1rem"><div class="token-line"><span class="token tag punctuation"><</span><span class="token tag class-name">Image</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">images</span><span class="token tag script language-javascript punctuation">.</span><span class="token tag script language-javascript property-access">logo</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag"> </span><span class="token tag attr-name">variant</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">avatar</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/></span></div></pre><style type="text/css"> /** * Reset the text fill color so that placeholder is visible */ .npm__react-simple-code-editor__textarea:empty { -webkit-text-fill-color: inherit !important; } /** * Hack to apply on some CSS on IE10 and IE11 */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /** * IE doesn't support '-webkit-text-fill-color' * So we use 'color: transparent' to make the text transparent on IE * Unlike other browsers, it doesn't affect caret color in IE */ .npm__react-simple-code-editor__textarea { color: transparent !important; } .npm__react-simple-code-editor__textarea::selection { background-color: #accef7 !important; color: transparent !important; } } </style></div></pre> <style data-emotion="css 9b0l1p">.css-9b0l1p{font-family:inherit;font-weight:800;line-height:1.25;font-size:32px;}</style><h2 id="variants" class="css-9b0l1p"><style data-emotion="css 1s1urti">.css-1s1urti{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1s1urti:hover{-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="#variants" class="css-1s1urti">Variants</a></h2> <p class="css-zezy6m">Image style variants can be defined in the <style data-emotion="css yigb6a">.css-yigb6a{font-family:Menlo,monospace;color:var(--theme-ui-colors-secondary);background-color:var(--theme-ui-colors-muted);}</style><style data-emotion="css 7ba0cc">.css-7ba0cc{font-family:Menlo,monospace;color:var(--theme-ui-colors-secondary);background-color:var(--theme-ui-colors-muted);font-family:Menlo,monospace;color:var(--theme-ui-colors-secondary);background-color:var(--theme-ui-colors-muted);}</style><code class="css-7ba0cc">theme.images</code> object.</p> <pre class="language-js prism-code language-javascript css-1daalwm"><div class="token-line"><span class="token comment">// example theme variants</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token literal-property property">images</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token literal-property property">avatar</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token literal-property property">width</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">48</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token literal-property property">height</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">48</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token literal-property property">borderRadius</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">99999</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">}</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">}</span></div></pre><style data-emotion="css 1kx8mb8">.css-1kx8mb8{display:inline-block;color:inherit;font-size:14px;margin-top:32px;margin-bottom:32px;}</style><a href="/?originalUrl=https%3A%2F%2Fgithub.com%2Fsystem-ui%2Ftheme-ui%2Fedit%2Fdevelop%2Fpackages%2Fdocs%2Fsrc%2Fpages%2Fcomponents%2Fimage.mdx" class="css-1kx8mb8">Edit the page on GitHub</a><style data-emotion="css 162tvoi">.css-162tvoi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-162tvoi"><style data-emotion="css 17jbust">.css-17jbust{font-size:14px;color:inherit;-webkit-text-decoration:none;text-decoration:none;font-weight:700;}</style><a href="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2Fcomponents%2Ficon-button" class="css-17jbust"><div>Previous:</div><style data-emotion="css t5vs5y">.css-t5vs5y{font-size:20px;}</style><div class="css-t5vs5y">IconButton</div></a><style data-emotion="css 7rlkf5">.css-7rlkf5{margin-left:auto;margin-right:auto;}</style><div class="css-7rlkf5"></div><a href="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2Fcomponents%2Finput" class="css-17jbust"><div>Next:</div><div class="css-t5vs5y">Input</div></a></div></main></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script type="text/javascript" src="/?originalUrl=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fdocsearch.js%402%2Fdist%2Fcdn%2Fdocsearch.min.js"></script><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/components/image";/*]]>*/</script><!-- slice-start id="_gatsby-scripts-1" --> <script id="gatsby-chunk-mapping" > window.___chunkMapping="{\"app\":[\"/app-9236c24d5783520c0b69.js\"]}"; </script> <script>window.___webpackCompilationHash="f03b84f0fa4befa8cbf9";</script><script src="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2Fwebpack-runtime-ebfa0e0f5674097ac951.js" async></script><script src="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2F08320e11-9bc08f3fd1ab2f68c4ee.js" async></script><script src="/?originalUrl=https%3A%2F%2Ftheme-ui.com%2Fapp-9236c24d5783520c0b69.js" async></script><!-- slice-end id="_gatsby-scripts-1" --></body></html>