@chakra-ui/react#Icon JavaScript Examples

The following examples show how to use @chakra-ui/react#Icon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
CopyIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2z"
      fill="currentColor"
    />
  </Icon>
)
Example #2
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
SavedIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M20 22H6.5A3.5 3.5 0 0 1 3 18.5V5a3 3 0 0 1 3-3h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1zm-1-2v-3H6.5a1.5 1.5 0 0 0 0 3H19zM10 4v8l3.5-2 3.5 2V4h-7z"
      fill="currentColor"
    />
  </Icon>
)
Example #3
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
BookmarkIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M4 2h16a1 1 0 0 1 1 1v19.276a.5.5 0 0 1-.704.457L12 19.03l-8.296 3.702A.5.5 0 0 1 3 22.276V3a1 1 0 0 1 1-1zm8 11.5l2.939 1.545-.561-3.272 2.377-2.318-3.286-.478L12 6l-1.47 2.977-3.285.478 2.377 2.318-.56 3.272L12 13.5z"
      fill="currentColor"
    />
  </Icon>
)
Example #4
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
LandscapeIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M16 21l-4.762-8.73L15 6l8 15h-7zM8 10l6 11H2l6-11zM5.5 8a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"
      fill="currentColor"
    />
  </Icon>
)
Example #5
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
ImageIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
      fill="currentColor"
    />
  </Icon>
)
Example #6
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
PatternIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M5 7h2v10H5V7zm-4 3h2v4H1v-4zm8-8h2v18H9V2zm4 2h2v18h-2V4zm4 3h2v10h-2V7zm4 3h2v4h-2v-4z"
      fill="currentColor"
    />
  </Icon>
)
Example #7
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
PaletteIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M12 2c5.522 0 10 3.978 10 8.889a5.558 5.558 0 0 1-5.556 5.555h-1.966c-.922 0-1.667.745-1.667 1.667 0 .422.167.811.422 1.1.267.3.434.689.434 1.122C13.667 21.256 12.9 22 12 22 6.478 22 2 17.522 2 12S6.478 2 12 2zm-1.189 16.111a3.664 3.664 0 0 1 3.667-3.667h1.966A3.558 3.558 0 0 0 20 10.89C20 7.139 16.468 4 12 4a8 8 0 0 0-.676 15.972 3.648 3.648 0 0 1-.513-1.86zM7.5 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm9 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM12 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"
      fill="currentColor"
    />
  </Icon>
)
Example #8
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
PaintIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M19.228 18.732l1.768-1.768 1.767 1.768a2.5 2.5 0 1 1-3.535 0zM8.878 1.08l11.314 11.313a1 1 0 0 1 0 1.415l-8.485 8.485a1 1 0 0 1-1.414 0l-8.485-8.485a1 1 0 0 1 0-1.415l7.778-7.778-2.122-2.121L8.88 1.08zM11 6.03L3.929 13.1H18.07L11 6.03z"
      fill="currentColor"
    />
  </Icon>
)
Example #9
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
SoundOffIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M10 7.22L6.603 10H3v4h3.603L10 16.78V7.22zM5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387L5.89 16zm14.525-4l3.536 3.536-1.414 1.414L19 13.414l-3.536 3.536-1.414-1.414L17.586 12 14.05 8.464l1.414-1.414L19 10.586l3.536-3.536 1.414 1.414L20.414 12z"
      fill="currentColor"
    />
  </Icon>
)
Example #10
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
SoundIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M10 7.22L6.603 10H3v4h3.603L10 16.78V7.22zM5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387L5.89 16zm13.517 4.134l-1.416-1.416A8.978 8.978 0 0 0 21 12a8.982 8.982 0 0 0-3.304-6.968l1.42-1.42A10.976 10.976 0 0 1 23 12c0 3.223-1.386 6.122-3.594 8.134zm-3.543-3.543l-1.422-1.422A3.993 3.993 0 0 0 16 12c0-1.43-.75-2.685-1.88-3.392l1.439-1.439A5.991 5.991 0 0 1 18 12c0 1.842-.83 3.49-2.137 4.591z"
      fill="currentColor"
    />
  </Icon>
)
Example #11
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
NpmIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M20 3c.552 0 1 .448 1 1v16c0 .552-.448 1-1 1H4c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h16zm-1 2H5v14h14V5zm-2 2v10h-2.5V9.5H12V17H7V7h10z"
      fill="currentColor"
    />
  </Icon>
)
Example #12
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
GithubIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"
      fill="currentColor"
    />
  </Icon>
)
Example #13
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
CopyrightIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm0 2c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 3c1.82 0 3.413.973 4.288 2.428l-1.714 1.029A3 3 0 1 0 12 15a2.998 2.998 0 0 0 2.573-1.456l1.715 1.028A4.999 4.999 0 0 1 7 12c0-2.76 2.24-5 5-5z"
      fill="currentColor"
    />
  </Icon>
)
Example #14
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
UserIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M4 22a8 8 0 1 1 16 0h-2a6 6 0 1 0-12 0H4zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z"
      fill="currentColor"
    />
  </Icon>
)
Example #15
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
CreditsIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M20.243 4.757c2.262 2.268 2.34 5.88.236 8.236l-8.48 8.492-8.478-8.492c-2.104-2.356-2.025-5.974.236-8.236 2.265-2.264 5.888-2.34 8.244-.228 2.349-2.109 5.979-2.039 8.242.228zM5.172 6.172c-1.49 1.49-1.565 3.875-.192 5.451L12 18.654l7.02-7.03c1.374-1.577 1.299-3.959-.193-5.454-1.487-1.49-3.881-1.562-5.453-.186l-4.202 4.203-1.415-1.414 2.825-2.827-.082-.069c-1.575-1.265-3.877-1.157-5.328.295z"
      fill="currentColor"
    />
  </Icon>
)
Example #16
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
TrashIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zm-9 3h2v6H9v-6zm4 0h2v6h-2v-6zM9 4v2h6V4H9z"
      fill="currentColor"
    />
  </Icon>
)
Example #17
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
DownloadIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M3 19h18v2H3v-2zm10-5.828L19.071 7.1l1.414 1.414L12 17 3.515 8.515 4.929 7.1 11 13.17V2h2v11.172z"
      fill="currentColor"
    />
  </Icon>
)
Example #18
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
QuestionIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0H24V24H0z" />
    <path
      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"
      fill="currentColor"
    />
  </Icon>
)
Example #19
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
InfoIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"
      fill="currentColor"
    />
  </Icon>
)
Example #20
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
HoriIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M23 12l-7.071 7.071-1.414-1.414L20.172 12l-5.657-5.657 1.414-1.414L23 12zM3.828 12l5.657 5.657-1.414 1.414L1 12l7.071-7.071 1.414 1.414L3.828 12z"
      fill="currentColor"
      stroke="3"
    />
  </Icon>
)
Example #21
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
HtmlIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12zM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z"
      fill="currentColor"
    />
  </Icon>
)
Example #22
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
RightArrowIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"
      fill="currentColor"
    />
  </Icon>
)
Example #23
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
FlutterIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M13.503 2.001l-10 10 3.083 3.083 13.08-13.083h-6.163zm-.006 9.198L8.122 16.62 13.494 22h6.189l-5.387-5.4 5.389-5.4h-6.188z"
      fill="currentColor"
    />
  </Icon>
)
Example #24
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
TwitterIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"
      fill="currentColor"
    />
  </Icon>
)
Example #25
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
OutlineIcon = (props) => (
  <Icon viewBox="0 0 24 24" {...props}>
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M5 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm14 0a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 14a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM5 22a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM9 4h6v2H9V4zm0 14h6v2H9v-2zM4 9h2v6H4V9zm14 0h2v6h-2V9z"
      fill="currentColor"
    />
  </Icon>
)
Example #26
Source File: Icons.js    From blobs.app with MIT License 6 votes vote down vote up 
LoIcon = () => (
  <Icon viewBox="0 0 1440 362" w="3rem" h="3rem">
    <g
      strokeLinejoin="round"
      strokeLinecap="round"
      strokeWidth="9"
      fill="none"
      stroke="currentColor"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M180 2C80.5887 2 0 82.5887 0 182C0 281.411 80.5887 362 180 362C279.411 362 360 281.411 360 182C360 181.332 359.996 180.666 359.989 180H333.987C333.996 180.666 334 181.332 334 182C334 267.052 265.052 336 180 336C94.9482 336 26 267.052 26 182C26 96.9482 94.9482 28 180 28V2Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M540 335C454.948 335 386 266.052 386 181C386 95.9482 454.948 27 540 27C624.718 27 693.459 95.4084 693.997 180H719.997C719.459 81.0489 639.078 1 540 1C440.589 1 360 81.5887 360 181C360 280.411 440.589 361 540 361V335Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M720 180C720 279.411 800.589 360 900 360C999.411 360 1080 279.411 1080 180C1080 80.5887 999.411 0 900 0V26C985.052 26 1054 94.9482 1054 180C1054 265.052 985.052 334 900 334C814.948 334 746 265.052 746 180H720Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M1414 182C1414 267.052 1345.05 336 1260 336V362C1359.41 362 1440 281.411 1440 182C1440 82.5887 1359.41 2 1260 2C1161.26 2 1081.08 81.5101 1080.01 180H1106.01C1107.08 95.8699 1175.62 28 1260 28C1345.05 28 1414 96.9482 1414 182Z"
        fill="currentColor"
      />
    </g>
  </Icon>
)
Example #27
Source File: components.js    From idena-web with MIT License 5 votes vote down vote up 
export function ScrollToTop({scrollableRef, children, ...props}) {
  const [opacity, setOpacity] = React.useState(0)
  const lastOpacity = React.useRef(Number.EPSILON)

  const scrollableElement = scrollableRef.current

  React.useEffect(() => {
    const handleScroll = e => {
      const prevOpacity = lastOpacity.current
      const nextOpacity = Math.min(
        Math.round((e.target.scrollTop / 2000) * 100),
        100
      )

      if (Math.abs(nextOpacity - prevOpacity) > 10) {
        setOpacity(nextOpacity < 11 ? 0 : nextOpacity / 100)
        lastOpacity.current = nextOpacity
      }
    }

    if (scrollableElement) {
      scrollableElement.addEventListener('scroll', handleScroll)
      return () => {
        scrollableElement.removeEventListener('scroll', handleScroll)
      }
    }
  }, [scrollableElement])

  return (
    <Button
      variant="unstyled"
      display="inline-flex"
      alignItems="center"
      justifyContent="center"
      position="absolute"
      bottom={4}
      right={4}
      borderRadius="lg"
      boxShadow="md"
      h={8}
      minH={8}
      minW={8}
      p={4}
      py={0}
      opacity={opacity}
      _focus={{
        boxShadow: 'md',
      }}
      onClick={() => {
        scrollableElement.scrollTo({top: 0, left: 0, behavior: 'smooth'})
      }}
      {...props}
    >
      <Stack isInline spacing={1} align="center">
        <Icon name="arrow-up" size={5} />
        <Text as="span">{children}</Text>
      </Stack>
    </Button>
  )
}
Example #28
Source File: components.js    From idena-web with MIT License 5 votes vote down vote up 
export function FlipEditorIcon(props) {
  return <Box as={Icon} size={5} _hover={{color: 'brandBlue.500'}} {...props} />
}
Example #29
Source File: texteditor.js    From GitMarkonics with MIT License 5 votes vote down vote up 
render() {
    return (
        <div>
          <Flex color="black">
            <Box
                flex="1"
                bg="#F0A6CA"
                border="0.5px"
                borderColor="#F0E6EF"
                style={{ margin: 0, padding: "5px" }}
                p={1}
                m={2}
            >
              <Stack direction="row" spacing={1} align="center">
                <Select
                    onChange={this.handleHeadingChange.bind(this)}
                    width="50%"
                    bg="F0A6CA"
                    value={this.state.value}
                >
                  {headersMap.map((item, i) => (
                      <option value={item.style}>{item.label}</option>
                  ))}
                </Select>
                <Tooltip label={`Ctrl + ${shortcutKeyMap.BOLD} - Bold`}>
                  <Button onClick={this._onBoldClick.bind(this)}>
                    <Icon as={GoBold} />
                  </Button>
                </Tooltip>
                <Tooltip label={`Ctrl + ${shortcutKeyMap.ITALIC} - Italic`}>
                  <Button onClick={this._onItalicClick.bind(this)}>
                    {" "}
                    <Icon as={GoItalic} />
                  </Button>
                </Tooltip>
                <Tooltip label={`Ctrl + ${shortcutKeyMap.QUOTE} - Quote`}>
                  <Button onClick={this._onBlockQuoteClick.bind(this)}>
                    <Icon as={GoQuote} />
                  </Button>
                </Tooltip>
                <Tooltip label={`Ctrl + ${shortcutKeyMap.LIST} - List`}>
                  <Button onClick={this._onBulletClick.bind(this)}>
                    <Icon as={GoListUnordered} />
                  </Button>
                </Tooltip>
                {/* <Button onClick={this._onNumberClick.bind(this)}>
                <Icon as={GoListOrdered} /> */}
                {/* </Button> */}
                <Tooltip label={`Ctrl + ${shortcutKeyMap.DOWNLOAD} - Download`}>
                  <Button onClick={this.onDownload.bind(this)}>
                    <Icon as={GoDesktopDownload} /> &nbsp;Download
                  </Button>
                </Tooltip>
              </Stack>
              <Box className="editors-panel">
                <Editor
                    editorState={this.state.editorState}
                    handleKeyCommand={this.handleKeyCommand}
                    onChange={this.onChange}
                    placeholder="Lets Start Documenting ..."
                />
              </Box>
            </Box>
            <Output file={this.state.file} />
          </Flex>
        </div>
    );
  }