@chakra-ui/icons#createIcon TypeScript Examples

The following examples show how to use @chakra-ui/icons#createIcon. 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: AccountCircleIcon.tsx    From takeout-app with MIT License 6 votes vote down vote up 
AccountCircleIcon = createIcon({
  displayName: "AccountCircle",
  viewBox: "0 0 24 24",
  path: (
    <>
      <path d="M0 0h24v24H0z" fill="none" />
      <path
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"
        fill="currentColor"
      />
    </>
  ),
})
Example #2
Source File: CampaignIcon.tsx    From takeout-app with MIT License 6 votes vote down vote up 
CampaignIcon = createIcon({
  displayName: "Campaign",
  viewBox: "0 0 24 24",
  path: (
    <path
      d="M18 11v2h4v-2h-4zm-2 6.61c.96.71 2.21 1.65 3.2 2.39.4-.53.8-1.07 1.2-1.6-.99-.74-2.24-1.68-3.2-2.4-.4.54-.8 1.08-1.2 1.61zM20.4 5.6c-.4-.53-.8-1.07-1.2-1.6-.99.74-2.24 1.68-3.2 2.4.4.53.8 1.07 1.2 1.6.96-.72 2.21-1.65 3.2-2.4zM4 9c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h1v4h2v-4h1l5 3V6L8 9H4zm11.5 3c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z"
      fill="currentColor"
    />
  ),
})
Example #3
Source File: ClosedCaptionIcon.tsx    From takeout-app with MIT License 6 votes vote down vote up 
ClosedCaptionIcon = createIcon({
  displayName: "ClosedCaption",
  viewBox: "0 0 24 24",
  path: (
    <path
      d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z"
      fill="currentColor"
    />
  ),
})
Example #4
Source File: EventNoteIcon.tsx    From takeout-app with MIT License 6 votes vote down vote up 
EventNoteIcon = createIcon({
  displayName: "EventNote",
  viewBox: "0 0 24 24",
  path: (
    <>
      <path d="M0 0h24v24H0z" fill="none" />
      <path
        d="M17 10H7v2h10v-2zm2-7h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zm-5-5H7v2h7v-2z"
        fill="currentColor"
      />
    </>
  ),
})
Example #5
Source File: GitHubIcon.tsx    From takeout-app with MIT License 6 votes vote down vote up 
GitHubIcon = createIcon({
  displayName: "GitHub",
  viewBox: "0 0 24 24",
  path: (
    <path
      d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.2.9.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1 .9 2.2v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3"
      fill="currentColor"
    />
  ),
})
Example #6
Source File: LunchDiningIcon.tsx    From takeout-app with MIT License 6 votes vote down vote up 
LunchDiningIcon = createIcon({
  displayName: "LunchDining",
  viewBox: "0 0 24 24",
  path: (
    <path
      fillRule="evenodd"
      d="M22 10c.32-3.28-4.28-6-9.99-6S1.7 6.72 2.02 10H22zM5.35 13.5c.55 0 .78.14 1.15.36.45.27 1.07.64 2.18.64s1.73-.37 2.18-.64c.37-.23.59-.36 1.15-.36.55 0 .78.14 1.15.36.45.27 1.07.64 2.18.64s1.73-.37 2.18-.64c.37-.23.59-.36 1.15-.36.55 0 .78.14 1.15.36.45.27 1.07.63 2.17.64v-1.98s-.79-.16-1.16-.38c-.45-.27-1.07-.64-2.18-.64s-1.73.37-2.18.64c-.37.23-.6.36-1.15.36s-.78-.14-1.15-.36c-.45-.27-1.07-.64-2.18-.64s-1.73.37-2.18.64c-.37.23-.59.36-1.15.36-.55 0-.78-.14-1.15-.36-.45-.27-1.07-.64-2.18-.64s-1.73.37-2.18.64c-.37.23-.59.36-1.15.36v2c1.11 0 1.73-.37 2.21-.64.37-.23.59-.36 1.14-.36zM2 16v2c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-2H2z"
      fill="currentColor"
    />
  ),
})
Example #7
Source File: MicIcon.tsx    From takeout-app with MIT License 6 votes vote down vote up 
MicIcon = createIcon({
  displayName: "Mic",
  viewBox: "0 0 24 24",
  path: (
    <path
      d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"
      fill="currentColor"
    />
  ),
})
Example #8
Source File: PersonIcon.tsx    From takeout-app with MIT License 6 votes vote down vote up 
PersonIcon = createIcon({
  displayName: "PersonIcon",
  viewBox: "0 0 24 24",
  path: (
    <>
      <path d="M0 0h24v24H0z" fill="none" />
      <path
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
        fill="currentColor"
      />
    </>
  ),
})
Example #9
Source File: SendIcon.tsx    From takeout-app with MIT License 6 votes vote down vote up 
SendIcon = createIcon({
  displayName: "Send",
  viewBox: "0 0 24 24",
  path: (
    <>
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" fill="currentColor" />
    </>
  ),
})
Example #10
Source File: TranslateIcon.tsx    From takeout-app with MIT License 6 votes vote down vote up 
TranslateIcon = createIcon({
  displayName: "Translate",
  viewBox: "0 0 24 24",
  path: (
    <path
      d="m12.87 15.07-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7 1.62-4.33L19.12 17h-3.24z"
      fill="currentColor"
    />
  ),
})
Example #11
Source File: TwitterIcon.tsx    From takeout-app with MIT License 6 votes vote down vote up 
TwitterIcon = createIcon({
  displayName: "Twitter",
  viewBox: "0 0 24 24",
  path: (
    <path
      d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"
      fill="currentColor"
    />
  ),
})
Example #12
Source File: CommitterIcon.tsx    From takeout-app with MIT License 5 votes vote down vote up 
CommitterIcon = createIcon({
  displayName: "Committer",
  viewBox: "0 0 24 24",
  path: <path d="M6.6 4L3 9.4L12 20L21 9.4L17.4 4H6.6Z" fill="currentColor" />,
})