reoverlay/docs/src/components/icon.js

The missing solution for managing modals in React.

import React from "react"

const Icon = ({ name }) => {
  switch (name) {
    case "github":
      return (
        <svg width="19" height="19" viewBox="0 0 19 19" fill="none">
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M9.5 0.5C4.25204 0.5 0 4.62997 0 9.72726C0 13.8026 2.72175 17.2629 6.49721 18.4832C6.97379 18.5677 7.14638 18.2848 7.14638 18.0387C7.14638 17.8188 7.13767 17.239 7.1345 16.4701C4.49033 17.026 3.93379 15.2329 3.93379 15.2329C3.50075 14.1663 2.87929 13.8811 2.87929 13.8811C2.01638 13.3105 2.94421 13.3228 2.94421 13.3228C3.89658 13.3889 4.39771 14.2717 4.39771 14.2717C5.24479 15.6835 6.62071 15.2752 7.16221 15.0406C7.24929 14.4432 7.49629 14.0372 7.76546 13.8065C5.65646 13.575 3.439 12.7823 3.439 9.24668C3.439 8.23706 3.81029 7.4143 4.41592 6.76839C4.32013 6.53771 3.99237 5.59729 4.50854 4.32701C4.50854 4.32701 5.30654 4.08095 7.12183 5.2728C7.89702 5.0682 8.6967 4.96425 9.5 4.96369C10.3075 4.96676 11.1205 5.06826 11.8782 5.2728C13.6935 4.08095 14.4883 4.32701 14.4883 4.32701C15.0076 5.59729 14.683 6.53771 14.5833 6.76839C15.1929 7.4143 15.5578 8.23706 15.5578 9.24668C15.5578 12.7915 13.338 13.5689 11.2227 13.8003C11.5631 14.0825 11.8655 14.6469 11.8655 15.5066C11.8655 16.7408 11.8568 17.735 11.8568 18.0387C11.8568 18.2848 12.0262 18.5731 12.5091 18.4832C16.2814 17.2606 19 13.8026 19 9.72726C19 4.62997 14.748 0.5 9.5 0.5Z"
            fill="white"
          />
        </svg>
      )
    case "donation":
      return (
        <svg width="16" height="23" viewBox="0 0 16 23" fill="none">
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M8.00672 5.12561L2.55713 5.09277L5.23327 22H5.81715H11.1694H11.7533L14.4295 5.09277L8.00672 5.12561Z"
            fill="#1A273C"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M6.54918 5.03302L1.5 5L3.97951 22H4.52049H9.47951H10.0205L12.5 5L6.54918 5.03302Z"
            fill="#435B81"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M8.18518 5.03302L3 5L5.5463 22H6.10185H9.89815H10.4537L13 5L8.18518 5.03302Z"
            fill="#263B5D"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M1 5.09286H15.0619V3.53369H1V5.09286Z"
            fill="white"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M1 5.09286H15.0619V3.53369H1V5.09286Z"
            stroke="black"
            strokeWidth="0.729856"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M12.3371 1H8.97979H6.98485H3.62751L2.60571 3.33875H6.98485H8.97979H13.3589L12.3371 1Z"
            fill="white"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M12.3371 1H8.97979H6.98485H3.62751L2.60571 3.33875H6.98485H8.97979H13.3589L12.3371 1Z"
            stroke="#050505"
            strokeWidth="0.729856"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M8.00672 5.12561L1.58398 5.09277L4.26012 22H4.84401H11.1694H11.7533L14.4294 5.09277L8.00672 5.12561Z"
            stroke="black"
            strokeWidth="0.729856"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M14.6242 9.86768H8.21309H7.75192H1.34082L2.54002 16.5916L7.98251 16.533L13.425 16.5916L14.6242 9.86768Z"
            fill="white"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M14.6242 9.86768H8.21309H7.75192H1.34082L2.54002 16.5916L7.98251 16.533L13.425 16.5916L14.6242 9.86768Z"
            stroke="black"
            strokeWidth="0.729856"
          />
        </svg>
      )
    case "twitter":
      return (
        <svg width="24" height="24" viewBox="0 0 112.197 112.197">
          <circle fill="#2578FF" cx="56.099" cy="56.098" r="56.098" />
          <path
            fill="#F1F2F2"
            d="M90.461,40.316c-2.404,1.066-4.99,1.787-7.702,2.109c2.769-1.659,4.894-4.284,5.897-7.417
			c-2.591,1.537-5.462,2.652-8.515,3.253c-2.446-2.605-5.931-4.233-9.79-4.233c-7.404,0-13.409,6.005-13.409,13.409
			c0,1.051,0.119,2.074,0.349,3.056c-11.144-0.559-21.025-5.897-27.639-14.012c-1.154,1.98-1.816,4.285-1.816,6.742
			c0,4.651,2.369,8.757,5.965,11.161c-2.197-0.069-4.266-0.672-6.073-1.679c-0.001,0.057-0.001,0.114-0.001,0.17
			c0,6.497,4.624,11.916,10.757,13.147c-1.124,0.308-2.311,0.471-3.532,0.471c-0.866,0-1.705-0.083-2.523-0.239
			c1.706,5.326,6.657,9.203,12.526,9.312c-4.59,3.597-10.371,5.74-16.655,5.74c-1.08,0-2.15-0.063-3.197-0.188
			c5.931,3.806,12.981,6.025,20.553,6.025c24.664,0,38.152-20.432,38.152-38.153c0-0.581-0.013-1.16-0.039-1.734
			C86.391,45.366,88.664,43.005,90.461,40.316L90.461,40.316z"
          />
        </svg>
      )
    default:
      return null
  }
}

export { Icon }