|
| 1 | +import React from "react"; |
| 2 | +import { IconWrapper } from "./IconWrapper"; |
| 3 | +import figma from "@figma/code-connect"; |
| 4 | + |
| 5 | +// Import all icons from an index file |
| 6 | +import * as Icons from './icons'; |
| 7 | + |
| 8 | +/** |
| 9 | + * -- This file connects the IconWrapper component to Figma -- |
| 10 | + * Uses instance swapper to allow selecting different icons |
| 11 | + */ |
| 12 | + |
| 13 | +figma.connect( |
| 14 | + IconWrapper, |
| 15 | + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=198-1573", |
| 16 | + { |
| 17 | + props: { |
| 18 | + icon: figma.instance("🖼️ Icon", { |
| 19 | + // START_ICON_INSTANCES |
| 20 | + 'up-right-and-down-left-from-center-solid': <Icons.UpRightAndDownLeftFromCenterSolidIcon />, |
| 21 | + 'question-circle(far)': <Icons.QuestionCircle(far)Icon />, |
| 22 | + 'not-started': <Icons.NotStartedIcon />, |
| 23 | + 'angle-double-left': <Icons.AngleDoubleLeftIcon />, |
| 24 | + 'trend-up': <Icons.TrendUpIcon />, |
| 25 | + 'down-left-and-up-right-to-center-solid': <Icons.DownLeftAndUpRightToCenterSolidIcon />, |
| 26 | + 'stop': <Icons.StopIcon />, |
| 27 | + 'undo': <Icons.UndoIcon />, |
| 28 | + 'caret-down': <Icons.CaretDownIcon />, |
| 29 | + 'save': <Icons.SaveIcon />, |
| 30 | + 'disconnected': <Icons.DisconnectedIcon />, |
| 31 | + 'arrow-right': <Icons.ArrowRightIcon />, |
| 32 | + 'angle-right': <Icons.AngleRightIcon />, |
| 33 | + 'check-circle': <Icons.CheckCircleIcon />, |
| 34 | + 'ellipsis-v': <Icons.EllipsisVIcon />, |
| 35 | + 'github': <Icons.GithubIcon />, |
| 36 | + 'exclamation-triangle': <Icons.ExclamationTriangleIcon />, |
| 37 | + 'cubes': <Icons.CubesIcon />, |
| 38 | + 'search': <Icons.SearchIcon />, |
| 39 | + 'linkedin': <Icons.LinkedinIcon />, |
| 40 | + 'plus-circle': <Icons.PlusCircleIcon />, |
| 41 | + 'check-circle': <Icons.CheckCircleIcon />, |
| 42 | + 'wrench': <Icons.WrenchIcon />, |
| 43 | + 'twitter': <Icons.TwitterIcon />, |
| 44 | + 'bars': <Icons.BarsIcon />, |
| 45 | + 'balance-scale': <Icons.BalanceScaleIcon />, |
| 46 | + 'thumbtack': <Icons.ThumbtackIcon />, |
| 47 | + 'wrench': <Icons.WrenchIcon />, |
| 48 | + 'cloud-tenant': <Icons.CloudTenantIcon />, |
| 49 | + 'panel-open': <Icons.PanelOpenIcon />, |
| 50 | + 'dropbox': <Icons.DropboxIcon />, |
| 51 | + 'data-processor': <Icons.DataProcessorIcon />, |
| 52 | + 'resources-almost-empty': <Icons.ResourcesAlmostEmptyIcon />, |
| 53 | + 'drupal': <Icons.DrupalIcon />, |
| 54 | + 'middleware': <Icons.MiddlewareIcon />, |
| 55 | + 'cluster': <Icons.ClusterIcon />, |
| 56 | + 'th-large': <Icons.ThLargeIcon />, |
| 57 | + 'new-process': <Icons.NewProcessIcon />, |
| 58 | + 'long-arrow-alt-up': <Icons.LongArrowAltUpIcon />, |
| 59 | + 'pencil-alt': <Icons.PencilAltIcon />, |
| 60 | + 'connected': <Icons.ConnectedIcon />, |
| 61 | + 'openstack': <Icons.OpenstackIcon />, |
| 62 | + 'pause-circle': <Icons.PauseCircleIcon />, |
| 63 | + 'share-square': <Icons.ShareSquareIcon />, |
| 64 | + 'check': <Icons.CheckIcon />, |
| 65 | + 'database': <Icons.DatabaseIcon />, |
| 66 | + 'sort-amount-down-alt': <Icons.SortAmountDownAltIcon />, |
| 67 | + 'panel-close': <Icons.PanelCloseIcon />, |
| 68 | + 'satellite': <Icons.SatelliteIcon />, |
| 69 | + 'clipboard-check': <Icons.ClipboardCheckIcon />, |
| 70 | + 'severity-moderate': <Icons.SeverityModerateIcon />, |
| 71 | + 'folder': <Icons.FolderIcon />, |
| 72 | + 'sort-amount-down': <Icons.SortAmountDownIcon />, |
| 73 | + 'calendar': <Icons.CalendarIcon />, |
| 74 | + 'eye': <Icons.EyeIcon />, |
| 75 | + 'enhancement': <Icons.EnhancementIcon />, |
| 76 | + 'expand-arrows-alt': <Icons.ExpandArrowsAltIcon />, |
| 77 | + 'pause': <Icons.PauseIcon />, |
| 78 | + 'resource-pool': <Icons.ResourcePoolIcon />, |
| 79 | + 'cloud-security': <Icons.CloudSecurityIcon />, |
| 80 | + 'network-range': <Icons.NetworkRangeIcon />, |
| 81 | + 'resources-full': <Icons.ResourcesFullIcon />, |
| 82 | + 'times': <Icons.TimesIcon />, |
| 83 | + 'question-circle': <Icons.QuestionCircleIcon />, |
| 84 | + 'window-restore': <Icons.WindowRestoreIcon />, |
| 85 | + 'severity-minor': <Icons.SeverityMinorIcon />, |
| 86 | + 'task': <Icons.TaskIcon />, |
| 87 | + 'arrow-circle-down': <Icons.ArrowCircleDownIcon />, |
| 88 | + 'play': <Icons.PlayIcon />, |
| 89 | + 'template': <Icons.TemplateIcon />, |
| 90 | + 'arrow-circle-up': <Icons.ArrowCircleUpIcon />, |
| 91 | + 'monitoring': <Icons.MonitoringIcon />, |
| 92 | + 'tenant': <Icons.TenantIcon />, |
| 93 | + 'regions': <Icons.RegionsIcon />, |
| 94 | + 'ban': <Icons.BanIcon />, |
| 95 | + 'search-minus': <Icons.SearchMinusIcon />, |
| 96 | + 'unknown': <Icons.UnknownIcon />, |
| 97 | + 'data-source': <Icons.DataSourceIcon />, |
| 98 | + 'bundle': <Icons.BundleIcon />, |
| 99 | + 'stack-overflow': <Icons.StackOverflowIcon />, |
| 100 | + 'network': <Icons.NetworkIcon />, |
| 101 | + 'download': <Icons.DownloadIcon />, |
| 102 | + 'storage-domain': <Icons.StorageDomainIcon />, |
| 103 | + 'severity-unidentified': <Icons.SeverityUnidentifiedIcon />, |
| 104 | + 'severity-none': <Icons.SeverityNoneIcon />, |
| 105 | + 'user': <Icons.UserIcon />, |
| 106 | + 'map-marker': <Icons.MapMarkerIcon />, |
| 107 | + 'cube': <Icons.CubeIcon />, |
| 108 | + 'volume': <Icons.VolumeIcon />, |
| 109 | + 'server-group': <Icons.ServerGroupIcon />, |
| 110 | + 'windows': <Icons.WindowsIcon />, |
| 111 | + 'flavor': <Icons.FlavorIcon />, |
| 112 | + 'ansible': <Icons.AnsibleIcon />, |
| 113 | + 'times-circle': <Icons.TimesCircleIcon />, |
| 114 | + 'memory': <Icons.MemoryIcon />, |
| 115 | + 'star': <Icons.StarIcon />, |
| 116 | + 'copy': <Icons.CopyIcon />, |
| 117 | + 'arrows-alt-v': <Icons.ArrowsAltVIcon />, |
| 118 | + 'table': <Icons.TableIcon />, |
| 119 | + 'folder-open': <Icons.FolderOpenIcon />, |
| 120 | + 'lock': <Icons.LockIcon />, |
| 121 | + 'vcenter': <Icons.VcenterIcon />, |
| 122 | + 'flag': <Icons.FlagIcon />, |
| 123 | + 'list': <Icons.ListIcon />, |
| 124 | + 'multicluster': <Icons.MulticlusterIcon />, |
| 125 | + 'plus-circle': <Icons.PlusCircleIcon />, |
| 126 | + 'degraded': <Icons.DegradedIcon />, |
| 127 | + 'cubes': <Icons.CubesIcon />, |
| 128 | + 'pending': <Icons.PendingIcon />, |
| 129 | + 'service-catalog': <Icons.ServiceCatalogIcon />, |
| 130 | + 'treeview': <Icons.TreeviewIcon />, |
| 131 | + 'tag': <Icons.TagIcon />, |
| 132 | + 'tachometer-alt': <Icons.TachometerAltIcon />, |
| 133 | + 'comments': <Icons.CommentsIcon />, |
| 134 | + 'enterprise': <Icons.EnterpriseIcon />, |
| 135 | + 'resources-almost-full': <Icons.ResourcesAlmostFullIcon />, |
| 136 | + 'topology': <Icons.TopologyIcon />, |
| 137 | + 'image': <Icons.ImageIcon />, |
| 138 | + 'desktop': <Icons.DesktopIcon />, |
| 139 | + 'lock-open': <Icons.LockOpenIcon />, |
| 140 | + 'data-sink': <Icons.DataSinkIcon />, |
| 141 | + 'service': <Icons.ServiceIcon />, |
| 142 | + 'repository': <Icons.RepositoryIcon />, |
| 143 | + 'builder-image': <Icons.BuilderImageIcon />, |
| 144 | + 'private': <Icons.PrivateIcon />, |
| 145 | + 'domain': <Icons.DomainIcon />, |
| 146 | + 'attention-bell': <Icons.AttentionBellIcon />, |
| 147 | + 'in-progress': <Icons.InProgressIcon />, |
| 148 | + 'key': <Icons.KeyIcon />, |
| 149 | + 'th': <Icons.ThIcon />, |
| 150 | + 'services': <Icons.ServicesIcon />, |
| 151 | + 'running': <Icons.RunningIcon />, |
| 152 | + 'trend-down': <Icons.TrendDownIcon />, |
| 153 | + 'user': <Icons.UserIcon />, |
| 154 | + 'lock': <Icons.LockIcon />, |
| 155 | + 'route': <Icons.RouteIcon />, |
| 156 | + 'virtual-machine': <Icons.VirtualMachineIcon />, |
| 157 | + 'linux': <Icons.LinuxIcon />, |
| 158 | + 'registry': <Icons.RegistryIcon />, |
| 159 | + 'power-off': <Icons.PowerOffIcon />, |
| 160 | + 'bug': <Icons.BugIcon />, |
| 161 | + 'open-drawer-right': <Icons.OpenDrawerRightIcon />, |
| 162 | + 'optimize': <Icons.OptimizeIcon />, |
| 163 | + 'long-arrow-alt-down': <Icons.LongArrowAltDownIcon />, |
| 164 | + 'minus': <Icons.MinusIcon />, |
| 165 | + 'security': <Icons.SecurityIcon />, |
| 166 | + 'port': <Icons.PortIcon />, |
| 167 | + 'bell': <Icons.BellIcon />, |
| 168 | + 'eye-slash': <Icons.EyeSlashIcon />, |
| 169 | + 'replicator': <Icons.ReplicatorIcon />, |
| 170 | + 'infrastructure': <Icons.InfrastructureIcon />, |
| 171 | + 'hdd': <Icons.HddIcon />, |
| 172 | + 'check': <Icons.CheckIcon />, |
| 173 | + 'angle-left': <Icons.AngleLeftIcon />, |
| 174 | + 'angle-down': <Icons.AngleDownIcon />, |
| 175 | + 'compress': <Icons.CompressIcon />, |
| 176 | + 'integration': <Icons.IntegrationIcon />, |
| 177 | + 'facebook': <Icons.FacebookIcon />, |
| 178 | + 'asleep': <Icons.AsleepIcon />, |
| 179 | + 'exclamation-circle': <Icons.ExclamationCircleIcon />, |
| 180 | + 'trash': <Icons.TrashIcon />, |
| 181 | + 'expand': <Icons.ExpandIcon />, |
| 182 | + 'sync-alt': <Icons.SyncAltIcon />, |
| 183 | + 'compress-arrows-alt': <Icons.CompressArrowsAltIcon />, |
| 184 | + 'export': <Icons.ExportIcon />, |
| 185 | + 'flag': <Icons.FlagIcon />, |
| 186 | + 'upload': <Icons.UploadIcon />, |
| 187 | + 'blueprint': <Icons.BlueprintIcon />, |
| 188 | + 'import': <Icons.ImportIcon />, |
| 189 | + 'google': <Icons.GoogleIcon />, |
| 190 | + 'resources-empty': <Icons.ResourcesEmptyIcon />, |
| 191 | + 'severity-critical': <Icons.SeverityCriticalIcon />, |
| 192 | + 'openshift': <Icons.OpenshiftIcon />, |
| 193 | + 'bitbucket': <Icons.BitbucketIcon />, |
| 194 | + 'severity-important': <Icons.SeverityImportantIcon />, |
| 195 | + 'cogs': <Icons.CogsIcon />, |
| 196 | + 'gitlab': <Icons.GitlabIcon />, |
| 197 | + 'columns': <Icons.ColumnsIcon />, |
| 198 | + 'microchip': <Icons.MicrochipIcon />, |
| 199 | + 'patternfly': <Icons.PatternflyIcon />, |
| 200 | + 'search-plus': <Icons.SearchPlusIcon />, |
| 201 | + 'angle-double-right': <Icons.AngleDoubleRightIcon />, |
| 202 | + 'build': <Icons.BuildIcon />, |
| 203 | + 'check-circle-2xl': <Icons.CheckCircle2xlIcon />, |
| 204 | + 'js': <Icons.JsIcon />, |
| 205 | + 'external-link-alt': <Icons.ExternalLinkAltIcon />, |
| 206 | + 'plus': <Icons.PlusIcon />, |
| 207 | + 'migration': <Icons.MigrationIcon />, |
| 208 | + 'space-shuttle-2xl': <Icons.SpaceShuttle2xlIcon />, |
| 209 | + 'thumbs-up-regular': <Icons.ThumbsUpRegularIcon />, |
| 210 | + 'thumbs-down-regular': <Icons.ThumbsDownRegularIcon />, |
| 211 | + 'message': <Icons.MessageIcon />, |
| 212 | + 'thumbs-up': <Icons.ThumbsUpIcon />, |
| 213 | + 'microphone': <Icons.MicrophoneIcon />, |
| 214 | + 'volume-high': <Icons.VolumeHighIcon />, |
| 215 | + 'paperclip': <Icons.PaperclipIcon />, |
| 216 | + 'thumbs-down': <Icons.ThumbsDownIcon />, |
| 217 | + 'robot': <Icons.RobotIcon />, |
| 218 | + 'hard-drive': <Icons.HardDriveIcon />, |
| 219 | + 'paper-plane': <Icons.PaperPlaneIcon />, |
| 220 | + 'info-circle': <Icons.InfoCircleIcon />, |
| 221 | + 'share-square-outline': <Icons.ShareSquareOutlineIcon />, |
| 222 | + 'home': <Icons.HomeIcon />, |
| 223 | + 'code-branch': <Icons.CodeBranchIcon />, |
| 224 | + 'route': <Icons.RouteIcon />, |
| 225 | + 'fingerprint': <Icons.FingerprintIcon />, |
| 226 | + 'zone': <Icons.ZoneIcon />, |
| 227 | + 'off': <Icons.OffIcon />, |
| 228 | + 'exclamation-triangle': <Icons.ExclamationTriangleIcon />, |
| 229 | + 'exclamation-circle': <Icons.ExclamationCircleIcon />, |
| 230 | + 'minus-circle': <Icons.MinusCircleIcon />, |
| 231 | + 'arrow-right': <Icons.ArrowRightIcon />, |
| 232 | + 'print': <Icons.PrintIcon />, |
| 233 | + 'clock': <Icons.ClockIcon />, |
| 234 | + 'cog': <Icons.CogIcon />, |
| 235 | + 'grip-horizontal': <Icons.GripHorizontalIcon />, |
| 236 | + 'grip-vertical': <Icons.GripVerticalIcon />, |
| 237 | + 'angle-up': <Icons.AngleUpIcon />, |
| 238 | + 'filter': <Icons.FilterIcon />, |
| 239 | + 'catalog': <Icons.CatalogIcon />, |
| 240 | + 'add-circle-o': <Icons.AddCircleOIcon />, |
| 241 | + 'process-automation': <Icons.ProcessAutomationIcon />, |
| 242 | + 'automation': <Icons.AutomationIcon />, |
| 243 | + 'history': <Icons.HistoryIcon />, |
| 244 | + 'pause-circle': <Icons.PauseCircleIcon />, |
| 245 | + 'redo': <Icons.RedoIcon />, |
| 246 | + 'file': <Icons.FileIcon />, |
| 247 | + 'search': <Icons.SearchIcon />, |
| 248 | + 'code': <Icons.CodeIcon />, |
| 249 | + 'user': <Icons.UserIcon />, |
| 250 | + 'cogs': <Icons.CogsIcon />, |
| 251 | + 'sliders': <Icons.SlidersIcon />, |
| 252 | + 'bell': <Icons.BellIcon />, |
| 253 | + 'info-circle': <Icons.InfoCircleIcon /> |
| 254 | + // END_ICON_INSTANCES |
| 255 | + }), |
| 256 | + iconSize: figma.enum("Icon Size", { |
| 257 | + "Standalone - Small": "standalone---small", |
| 258 | + "Standalone - Medium": "standalone---medium", |
| 259 | + "Standalone - Large": "standalone---large", |
| 260 | + "Standalone - XL": "standalone---xl", |
| 261 | + "Standalone -2XL": "standalone--2xl", |
| 262 | + "Standalone - 3XL": "standalone---3xl", |
| 263 | + "Body - Small": "body---small", |
| 264 | + "Body - Default": "body---default", |
| 265 | + "Body - Large": "body---large", |
| 266 | + "Heading - H1": "heading---h1", |
| 267 | + "Heading - H2": "heading---h2", |
| 268 | + "Heading - H3": "heading---h3", |
| 269 | + "Heading - H4": "heading---h4", |
| 270 | + "Heading - H5": "heading---h5", |
| 271 | + "Heading - H6": "heading---h6", |
| 272 | + "Font size - XS": "font-size---xs", |
| 273 | + "Font size - Sm": "font-size---sm", |
| 274 | + "Font size - Med": "font-size---med", |
| 275 | + "Font size - Lg": "font-size---lg", |
| 276 | + "Font size - XL": "font-size---xl", |
| 277 | + "Font size - 2XL": "font-size---2xl", |
| 278 | + "Font size - 3xl": "font-size---3xl", |
| 279 | + "Font size - 4xl": "font-size---4xl", |
| 280 | + }), |
| 281 | + }, |
| 282 | + example: (props) => <IconWrapper {...props} />, |
| 283 | + }, |
| 284 | +); |
0 commit comments