feat(image): allow component to render svg string (#692)

* feat(image): allow component to render svg string * docs(image): update the image content of examples
geist-org · Jan 30, 2022 · 0f126e9 · 0f126e9
1 parent a32f585
commit 0f126e9
Show file tree

Hide file tree

Showing 13 changed files with 90 additions and 29 deletions.
diff --git a/components/image/__tests__/__snapshots__/browser.test.tsx.snap b/components/image/__tests__/__snapshots__/browser.test.tsx.snap
@@ -3042,7 +3042,7 @@ LoadedCheerio {
           width: auto;
           height: auto;
           object-fit: scale-down;
-          display: block;
+          display: inline-block;
         }
       ",
                     "next": null,
@@ -3091,7 +3091,7 @@ LoadedCheerio {
           width: auto;
           height: auto;
           object-fit: scale-down;
-          display: block;
+          display: inline-block;
         }
       ",
                   "next": null,
@@ -3265,7 +3265,7 @@ LoadedCheerio {
           width: auto;
           height: auto;
           object-fit: scale-down;
-          display: block;
+          display: inline-block;
         }
       ",
                   "next": null,
@@ -3314,7 +3314,7 @@ LoadedCheerio {
           width: auto;
           height: auto;
           object-fit: scale-down;
-          display: block;
+          display: inline-block;
         }
       ",
                 "next": null,
@@ -6572,7 +6572,7 @@ LoadedCheerio {
           width: auto;
           height: auto;
           object-fit: scale-down;
-          display: block;
+          display: inline-block;
         }
       ",
                     "next": null,
@@ -6621,7 +6621,7 @@ LoadedCheerio {
           width: auto;
           height: auto;
           object-fit: scale-down;
-          display: block;
+          display: inline-block;
         }
       ",
                   "next": null,

diff --git a/components/image/__tests__/__snapshots__/index.test.tsx.snap b/components/image/__tests__/__snapshots__/index.test.tsx.snap
@@ -5,3 +5,9 @@ exports[`Image should render correctly 1`] = `ReactWrapper {}`;
 exports[`Image should render correctly 2`] = `ReactWrapper {}`;
 
 exports[`Image should render correctly 3`] = `ReactWrapper {}`;
+
+exports[`Image should render correctly with svg string 1`] = `ReactWrapper {}`;
+
+exports[`Image should render correctly with svg string 2`] = `ReactWrapper {}`;
+
+exports[`Image should render correctly with svg string 3`] = `ReactWrapper {}`;
diff --git a/components/image/__tests__/index.test.tsx b/components/image/__tests__/index.test.tsx
@@ -8,6 +8,9 @@ const url =
   'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO' +
   '9TXL0Y4OHwAAAABJRU5ErkJggg=='
 
+const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 15 15" fill="none">
+      <path d="M12.5 8V7.83333C12.5 7.09695 11.903 6.5 11.1667 6.5H10C9.17157 6.5 8.5 7.17157 8.5 8C8.5 8.82843 9.17157 9.5 10 9.5H11C11.8284 9.5 12.5 10.1716 12.5 11C12.5 11.8284 11.8284 12.5 11 12.5H10C9.17157 12.5 8.5 11.8284 8.5 11M8 6.5H3M5.5 6.5V13M0.5 0.5H14.5V14.5H0.5V0.5Z" stroke="black"/></svg>`
+
 describe('Image', () => {
   it('should render correctly', async () => {
     let wrapper = mount(<Image src={url} />)
@@ -25,6 +28,22 @@ describe('Image', () => {
     expect(() => wrapper.unmount()).not.toThrow()
   })
 
+  it('should render correctly with svg string', () => {
+    let wrapper = mount(<Image src={svg} />)
+    expect(wrapper).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+
+    wrapper = mount(<Image src={svg} width={20} height={20} />)
+    wrapper.find('img').at(0).simulate('load')
+    expect(wrapper).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+
+    wrapper = mount(<Image src={svg} width={20} height={20} disableSkeleton />)
+    wrapper.find('img').at(0).simulate('load')
+    expect(wrapper).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
   it('should work correctly with skeleton', async () => {
     let wrapper = mount(<Image src={url} width={20} height={20} />)
     expect(wrapper.find('.skeleton').length).not.toBe(0)

diff --git a/components/image/helpers.ts b/components/image/helpers.ts
@@ -0,0 +1,15 @@
+export const transformDataSource = (src: string) => {
+  const left = `${src}`.slice(0, 4)
+  if (encodeURIComponent(left) === '%3Csvg') {
+    return `data:image/svg+xml;utf8,${src}`
+  }
+  return src
+}
+
+export const getHostFromUrl = (url: string) => {
+  try {
+    return new URL(url).host
+  } catch (e) {
+    return url
+  }
+}
diff --git a/components/image/image-browser.tsx b/components/image/image-browser.tsx
@@ -4,6 +4,7 @@ import { Props as LinkProps } from '../link/link'
 import useTheme from '../use-theme'
 import ImageBrowserHttpsIcon from './image-browser-https-icon'
 import { getBrowserColors, BrowserColors } from './styles'
+import { getHostFromUrl } from './helpers'
 import useScaleable, { withPureProps, withScaleable } from '../use-scaleable'
 
 export type ImageAnchorProps = Omit<React.AnchorHTMLAttributes<any>, keyof LinkProps>
@@ -27,14 +28,6 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type ImageBrowserProps = Props & NativeAttrs
 
-const getHostFromUrl = (url: string) => {
-  try {
-    return new URL(url).host
-  } catch (e) {
-    return url
-  }
-}
-
 const getTitle = (title: string, colors: BrowserColors) => (
   <div className="title">
     {title}

diff --git a/components/image/image.tsx b/components/image/image.tsx
@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import useTheme from '../use-theme'
 import ImageSkeleton from './image.skeleton'
+import { transformDataSource } from './helpers'
 import useScaleable, { withPureProps, withScaleable } from '../use-scaleable'
 
 interface Props {
@@ -35,6 +36,7 @@ const ImageComponent: React.FC<ImageProps> = ({
   const [loading, setLoading] = useState<boolean>(true)
   const [showSkeleton, setShowSkeleton] = useState<boolean>(true)
   const imageRef = useRef<HTMLImageElement>(null)
+  const url = useMemo(() => transformDataSource(src), [src])
 
   const imageLoaded = () => {
     if (!showAnimation) return
@@ -63,7 +65,7 @@ const ImageComponent: React.FC<ImageProps> = ({
   return (
     <div className={`image ${className}`}>
       {showSkeleton && showAnimation && <ImageSkeleton opacity={loading ? 0.5 : 0} />}
-      <img ref={imageRef} onLoad={imageLoaded} src={src} {...withPureProps(props)} />
+      <img ref={imageRef} onLoad={imageLoaded} src={url} {...withPureProps(props)} />
       <style jsx>{`
         .image {
           position: relative;
@@ -81,7 +83,7 @@ const ImageComponent: React.FC<ImageProps> = ({
           width: ${SCALES.width(1, 'auto')};
           height: ${SCALES.height(1, 'auto')};
           object-fit: scale-down;
-          display: block;
+          display: inline-block;
         }
       `}</style>
     </div>

diff --git a/pages/en-us/components/image.mdx b/pages/en-us/components/image.mdx
@@ -14,7 +14,7 @@ Display image content.
   title="Basic"
   scope={{ Image }}
   code={`
-<Image width="540px" height="160px" src="/images/custom-domains.png" />
+<Image width="280px" height="160px" src="/images/geist-banner.png" />
 `}
 />
 
@@ -23,8 +23,8 @@ Display image content.
   desc="`Image` will show skeleton animation after `width` and `height` props are set."
   scope={{ Image }}
   code={`
-<Image width="540px" height="160px"
-  src="http://www.deelay.me/2000/https://geist-ui.dev/images/custom-domains.png" />
+<Image width="280px" height="160px"
+  src="http://www.deelay.me/2000/https://geist-ui.dev/images/geist-banner.png" />
 `}
 />
 
@@ -34,7 +34,7 @@ Display image content.
   scope={{ Image, Display, Code }}
   code={`
 <Image.Browser url="https://geist-ui.dev/en-us/guide/introduction" anchorProps={{ rel: 'nofollow' }}>
-  <Image width="540px" height="246px" src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
+  <Image width="525px" height="300px" src="/images/geist-banner.png" />
 </Image.Browser>
 `}
 />
@@ -44,7 +44,7 @@ Display image content.
   scope={{ Image, Display, Code }}
   code={`
 <Image.Browser url="https://geist-ui.dev/en-us/guide/introduction" invert>
-  <Image width="540px" height="246px" src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
+  <Image width="525px" height="300px" src="/images/geist-banner-dark.png" />
 </Image.Browser>
 `}
 />
@@ -55,11 +55,24 @@ Display image content.
   scope={{ Image, Display, Code }}
   code={`
 <Display shadow caption={<p>Set the <Code>height</Code> to reduces the possibility of page rerender.</p>}>
-  <Image width="540px" height="246px" src="/images/branch-domains.png" />
+  <Image height="246px" src="/images/geist-banner-text.png" />
 </Display>
 `}
 />
 
+<Playground
+  title="SVG"
+  desc="Render svg strings directly"
+  scope={{ Image }}
+  code={`
+() => {
+  const svg = \`<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 15 15" fill="none">
+      <path d="M12.5 8V7.83333C12.5 7.09695 11.903 6.5 11.1667 6.5H10C9.17157 6.5 8.5 7.17157 8.5 8C8.5 8.82843 9.17157 9.5 10 9.5H11C11.8284 9.5 12.5 10.1716 12.5 11C12.5 11.8284 11.8284 12.5 11 12.5H10C9.17157 12.5 8.5 11.8284 8.5 11M8 6.5H3M5.5 6.5V13M0.5 0.5H14.5V14.5H0.5V0.5Z" stroke="black"/></svg>\`
+  return <Image width="100px" height="50px" src={svg} />
+}
+`}
+/>
+
 <Attributes edit="/pages/en-us/components/image.mdx">
 <Attributes.Title>Image.Props</Attributes.Title>
 

diff --git a/pages/zh-cn/components/image.mdx b/pages/zh-cn/components/image.mdx
@@ -13,7 +13,7 @@ export const meta = {
 <Playground
   scope={{ Image }}
   code={`
-<Image width="540px" height="160px" src="/images/custom-domains.png" />
+<Image width="280px" height="160px" src="/images/geist-banner.png" />
 `}
 />
 
@@ -22,8 +22,8 @@ export const meta = {
   desc="组件在设置 `width` 与 `height` 属性后会在加载时显示骨架动画。"
   scope={{ Image }}
   code={`
-<Image width="540px" height="160px"
-  src="http://www.deelay.me/2000/https://geist-ui.dev/images/custom-domains.png" />
+<Image width="280px" height="160px"
+  src="http://www.deelay.me/2000/https://geist-ui.dev/images/geist-banner.png" />
 `}
 />
 
@@ -33,7 +33,7 @@ export const meta = {
   scope={{ Image, Display, Code }}
   code={`
 <Image.Browser url="https://geist-ui.dev/en-us/guide/introduction" >
-  <Image width="540px" height="246px" src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
+  <Image width="525px" height="300px" src="/images/geist-banner.png" />
 </Image.Browser>
 `}
 />
@@ -43,7 +43,7 @@ export const meta = {
   scope={{ Image, Display, Code }}
   code={`
 <Image.Browser url="https://geist-ui.dev/en-us/guide/introduction" invert>
-  <Image width="540px" height="246px" src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png" />
+  <Image width="525px" height="300px" src="/images/geist-banner-dark.png" />
 </Image.Browser>
 `}
 />
@@ -54,11 +54,24 @@ export const meta = {
   scope={{ Image, Display, Code }}
   code={`
 <Display shadow caption={<p>设置 <Code>height</Code> 属性可以尽可能的减少重绘。</p>}>
-  <Image width="540px" height="246px" src="/images/branch-domains.png" />
+  <Image height="246px" src="/images/geist-banner-text.png" />
 </Display>
 `}
 />
 
+<Playground
+  title="SVG"
+  desc="直接渲染 SVG 字符串"
+  scope={{ Image }}
+  code={`
+() => {
+  const svg = \`<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" viewBox="0 0 15 15" fill="none">
+      <path d="M12.5 8V7.83333C12.5 7.09695 11.903 6.5 11.1667 6.5H10C9.17157 6.5 8.5 7.17157 8.5 8C8.5 8.82843 9.17157 9.5 10 9.5H11C11.8284 9.5 12.5 10.1716 12.5 11C12.5 11.8284 11.8284 12.5 11 12.5H10C9.17157 12.5 8.5 11.8284 8.5 11M8 6.5H3M5.5 6.5V13M0.5 0.5H14.5V14.5H0.5V0.5Z" stroke="black"/></svg>\`
+  return <Image width="100px" height="50px" src={svg} />
+}
+`}
+/>
+
 <Attributes edit="/pages/zh-cn/components/image.mdx">
 <Attributes.Title>Image.Props</Attributes.Title>
 

diff --git a/public/images/branch-domains.png b/public/images/branch-domains.png
diff --git a/public/images/custom-domains.png b/public/images/custom-domains.png
diff --git a/public/images/geist-banner-dark.png b/public/images/geist-banner-dark.png
diff --git a/public/images/geist-banner-text.png b/public/images/geist-banner-text.png
diff --git a/public/images/zeit-react-logo.png b/public/images/zeit-react-logo.png