| 1 | /** |
| 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. |
| 3 | * |
| 4 | * This source code is licensed under the MIT license found in the |
| 5 | * LICENSE file in the root directory of this source tree. |
| 6 | * |
| 7 | * @flow |
| 8 | */ |
| 9 | |
| 10 | import * as React from 'react'; |
| 11 | import styles from './Icon.css'; |
| 12 | |
| 13 | export type IconType = |
| 14 | | 'arrow' |
| 15 | | 'bug' |
| 16 | | 'code' |
| 17 | | 'components' |
| 18 | | 'copy' |
| 19 | | 'error' |
| 20 | | 'facebook' |
| 21 | | 'find' |
| 22 | | 'flame-chart' |
| 23 | | 'profiler' |
| 24 | | 'ranked-chart' |
| 25 | | 'search' |
| 26 | | 'settings' |
| 27 | | 'store-as-global-variable' |
| 28 | | 'strict-mode-non-compliant' |
| 29 | | 'suspense' |
| 30 | | 'warning'; |
| 31 | |
| 32 | type Props = { |
| 33 | className?: string, |
| 34 | title?: string, |
| 35 | type: IconType, |
| 36 | ... |
| 37 | }; |
| 38 | |
| 39 | export default function Icon({ |
| 40 | className = '', |
| 41 | title = '', |
| 42 | type, |
| 43 | ...props |
| 44 | }: Props): React.Node { |
| 45 | let pathData = null; |
| 46 | let viewBox = '0 0 24 24'; |
| 47 | switch (type) { |
| 48 | case 'arrow': |
| 49 | pathData = PATH_ARROW; |
| 50 | break; |
| 51 | case 'bug': |
| 52 | pathData = PATH_BUG; |
| 53 | break; |
| 54 | case 'code': |
| 55 | pathData = PATH_CODE; |
| 56 | break; |
| 57 | case 'components': |
| 58 | pathData = PATH_COMPONENTS; |
| 59 | break; |
| 60 | case 'copy': |
| 61 | pathData = PATH_COPY; |
| 62 | break; |
| 63 | case 'error': |
| 64 | pathData = PATH_ERROR; |
| 65 | break; |
| 66 | case 'facebook': |
| 67 | pathData = PATH_FACEBOOK; |
| 68 | break; |
| 69 | case 'flame-chart': |
| 70 | pathData = PATH_FLAME_CHART; |
| 71 | break; |
| 72 | case 'profiler': |
| 73 | pathData = PATH_PROFILER; |
| 74 | break; |
| 75 | case 'ranked-chart': |
| 76 | pathData = PATH_RANKED_CHART; |
| 77 | break; |
| 78 | case 'search': |
| 79 | pathData = PATH_SEARCH; |
| 80 | break; |
| 81 | case 'find': |
| 82 | pathData = PATH_FIND; |
| 83 | viewBox = '0 0 16 16'; |
| 84 | break; |
| 85 | case 'settings': |
| 86 | pathData = PATH_SETTINGS; |
| 87 | break; |
| 88 | case 'store-as-global-variable': |
| 89 | pathData = PATH_STORE_AS_GLOBAL_VARIABLE; |
| 90 | break; |
| 91 | case 'strict-mode-non-compliant': |
| 92 | pathData = PATH_STRICT_MODE_NON_COMPLIANT; |
| 93 | break; |
| 94 | case 'suspense': |
| 95 | pathData = PATH_SUSPEND; |
| 96 | viewBox = '-2 -2 28 28'; |
| 97 | break; |
| 98 | case 'warning': |
| 99 | pathData = PATH_WARNING; |
| 100 | break; |
| 101 | default: |
| 102 | console.warn(`Unsupported type "${type}" specified for Icon`); |
| 103 | break; |
| 104 | } |
| 105 | |
| 106 | return ( |
| 107 | <svg |
| 108 | {...props} |
| 109 | xmlns="http://www.w3.org/2000/svg" |
| 110 | className={`${styles.Icon} ${className}`} |
| 111 | width="24" |
| 112 | height="24" |
| 113 | viewBox={viewBox}> |
| 114 | {title && <title>{title}</title>} |
| 115 | <path d="M0 0h24v24H0z" fill="none" /> |
| 116 | <path fill="currentColor" d={pathData} /> |
| 117 | </svg> |
| 118 | ); |
| 119 | } |
| 120 | |
| 121 | const PATH_ARROW = 'M8 5v14l11-7z'; |
| 122 | |
| 123 | const PATH_BUG = ` |
| 124 | M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 |
| 125 | 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 |
| 126 | 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 |
| 127 | 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z |
| 128 | `; |
| 129 | |
| 130 | const PATH_CODE = ` |
| 131 | M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z |
| 132 | `; |
| 133 | |
| 134 | const PATH_COMPONENTS = |
| 135 | 'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'; |
| 136 | |
| 137 | const PATH_COPY = ` |
| 138 | M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3a2 2 0 0 0 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2 |
| 139 | 2v10a2 2 0 0 0 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z |
| 140 | `; |
| 141 | |
| 142 | const PATH_ERROR = `M16.971 0h-9.942l-7.029 7.029v9.941l7.029 7.03h9.941l7.03-7.029v-9.942l-7.029-7.029zm-1.402 16.945l-3.554-3.521-3.518 3.568-1.418-1.418 3.507-3.566-3.586-3.472 1.418-1.417 3.581 3.458 3.539-3.583 1.431 1.431-3.535 3.568 3.566 3.522-1.431 1.43z`; |
| 143 | |
| 144 | const PATH_FACEBOOK = ` |
| 145 | M22,12c0-5.52-4.48-10-10-10S2,6.48,2,12c0,4.84,3.44,8.87,8,9.8V15H8v-3h2V9.5C10,7.57,11.57,6,13.5,6H16v3h-2 c-0.55,0-1,0.45-1,1v2h3v3h-3v6.95C18.05,21.45,22,17.19,22,12z |
| 146 | `; |
| 147 | |
| 148 | const PATH_FLAME_CHART = ` |
| 149 | M10.0650893,21.5040462 C7.14020814,20.6850349 5,18.0558698 5,14.9390244 C5,14.017627 |
| 150 | 5,9.81707317 7.83333333,7.37804878 C7.83333333,7.37804878 7.58333333,11.199187 10, |
| 151 | 10.6300813 C11.125,10.326087 13.0062497,7.63043487 8.91666667,2.5 C14.1666667,3.06910569 |
| 152 | 19,9.32926829 19,14.9390244 C19,18.0558698 16.8597919,20.6850349 13.9349107,21.5040462 |
| 153 | C14.454014,21.0118505 14.7765152,20.3233394 14.7765152,19.5613412 C14.7765152,17.2826087 |
| 154 | 12,15.0875871 12,15.0875871 C12,15.0875871 9.22348485,17.2826087 9.22348485,19.5613412 |
| 155 | C9.22348485,20.3233394 9.54598603,21.0118505 10.0650893,21.5040462 Z M12.0833333,20.6514763 |
| 156 | C11.3814715,20.6514763 10.8125,20.1226027 10.8125,19.4702042 C10.8125,18.6069669 |
| 157 | 12.0833333,16.9347829 12.0833333,16.9347829 C12.0833333,16.9347829 13.3541667,18.6069669 |
| 158 | 13.3541667,19.4702042 C13.3541667,20.1226027 12.7851952,20.6514763 12.0833333,20.6514763 Z |
| 159 | `; |
| 160 | |
| 161 | const PATH_PROFILER = 'M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z'; |
| 162 | |
| 163 | const PATH_SEARCH = ` |
| 164 | M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 |
| 165 | 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 |
| 166 | 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z |
| 167 | `; |
| 168 | |
| 169 | const PATH_FIND = |
| 170 | 'M6.5 0.5a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 1.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9z' + |
| 171 | 'M11.17 10.03l3.7 3.7a0.8 0.8 0 0 1-1.14 1.14l-3.7-3.7z'; |
| 172 | |
| 173 | const PATH_RANKED_CHART = 'M3 5h18v3H3zM3 10.5h13v3H3zM3 16h8v3H3z'; |
| 174 | |
| 175 | const PATH_SETTINGS = ` |
| 176 | M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 |
| 177 | 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 |
| 178 | 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 |
| 179 | 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 |
| 180 | 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 |
| 181 | 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 |
| 182 | 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z |
| 183 | `; |
| 184 | |
| 185 | const PATH_STORE_AS_GLOBAL_VARIABLE = ` |
| 186 | M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 |
| 187 | 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 |
| 188 | 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 |
| 189 | 8h-4v-2h4v2zm0-4h-4v-2h4v2z |
| 190 | `; |
| 191 | |
| 192 | const PATH_STRICT_MODE_NON_COMPLIANT = ` |
| 193 | M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 |
| 194 | 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z |
| 195 | `; |
| 196 | |
| 197 | const PATH_SUSPEND = ` |
| 198 | M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 |
| 199 | 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z |
| 200 | `; |
| 201 | |
| 202 | const PATH_WARNING = `M12 1l-12 22h24l-12-22zm-1 8h2v7h-2v-7zm1 11.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z`; |