Updating figma icons scripts to handle the new naming convensions in …

…the figma file

scripts/generate-figma-icons.js

@@ -1,25 +1,27 @@
-import { client } from '@figma/code-connect'
 import fs from 'fs'
-
 import path from 'path'
 
+import { client } from '@figma/code-connect'
+
 async function getIcons() {
   const components = await client.getComponents(
-    'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr/Sequence-Design-System-1.1?node-id=9818-3653'
+    'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr/Sequence-Design-System-1.1?node-id=10216-5855'
   )
+  const icons = components.filter(component => component.name.endsWith('Icon'))
 
   const rootPath = path.resolve('./src/icons')
 
-  console.log(components.length, 'icons found in figma')
+  console.log(icons.length, 'icons found in figma')
 
   console.log('Writing figma files...')
 
   let succeeded = 0
   let failed = 0
 
-  for (const icon of components) {
-    const componentName = `${capitalize(icon.name)}Icon`
+  const missingIcons = []
 
+  for (const icon of icons) {
+    const componentName = icon.name
     const componentPath = path.join(rootPath, `${componentName}.tsx`)
 
     // Check to see if a react component with the same name exists in the icons directory
@@ -50,13 +52,15 @@ figma.connect(
     } else {
       console.log('  ✘ Couldnt find', componentName)
       failed++
+      missingIcons.push(componentName)
     }
   }
 
   console.log('\nDone writing figma files')
   console.log(succeeded, 'succeeded', failed, 'failed')
+
+  console.log('\nMissing icons:\n')
+  console.log(missingIcons.join('\n'))
 }
 
 getIcons()
-
-const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

src/components/Button/Button.figma.tsx

@@ -31,12 +31,12 @@ figma.connect(
         xsmall: 'xs',
       }),
       label: figma.string('label'),
+      leftIcon: figma.instance('leftIcon'),
       // hasLeftIcon: figma.boolean("hasLeftIcon"),
       // hasRightIcon: figma.boolean("hasRightIcon")
       // No matching props could be found for these Figma properties:
-      // "righIcon": figma.instance('righIcon'),
+      // rightIcon: figma.instance('rightIcon'),
       // "hasRightIcon": figma.boolean('hasRightIcon'),
-      // "leftIcon": figma.instance('leftIcon'),
       // "hasLeftIcon": figma.boolean('hasLeftIcon')
     },
     example: props => (
@@ -46,6 +46,7 @@ figma.connect(
         disabled={props.disabled}
         size={props.size}
         label={props.label}
+        leftIcon={props.leftIcon}
       />
     ),
   }

src/icons/AirDropperIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { AirDropperIcon } from './index'
+
+figma.connect(
+  AirDropperIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=2146-25164', 
+  {
+    example: () => <AirDropperIcon />
+  }
+)

src/icons/AppleIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { AppleIcon } from './index'
+
+figma.connect(
+  AppleIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=2159-28190', 
+  {
+    example: () => <AppleIcon />
+  }
+)

src/icons/ArrowDownIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ArrowDownIcon } from './index'
+
+figma.connect(
+  ArrowDownIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=2431-2649', 
+  {
+    example: () => <ArrowDownIcon />
+  }
+)

src/icons/ArrowRightIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ArrowRightIcon } from './index'
+
+figma.connect(
+  ArrowRightIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-22013', 
+  {
+    example: () => <ArrowRightIcon />
+  }
+)

src/icons/ChevronDownIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ChevronDownIcon } from './index'
+
+figma.connect(
+  ChevronDownIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21944', 
+  {
+    example: () => <ChevronDownIcon />
+  }
+)

src/icons/ChevronLeftIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ChevronLeftIcon } from './index'
+
+figma.connect(
+  ChevronLeftIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21962', 
+  {
+    example: () => <ChevronLeftIcon />
+  }
+)

src/icons/ChevronRightIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ChevronRightIcon } from './index'
+
+figma.connect(
+  ChevronRightIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21956', 
+  {
+    example: () => <ChevronRightIcon />
+  }
+)

src/icons/ChevronUpIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ChevronUpIcon } from './index'
+
+figma.connect(
+  ChevronUpIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21950', 
+  {
+    example: () => <ChevronUpIcon />
+  }
+)

src/icons/ContactsIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ContactsIcon } from './index'
+
+figma.connect(
+  ContactsIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=11017-8639', 
+  {
+    example: () => <ContactsIcon />
+  }
+)

src/icons/ContextMenuIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ContextMenuIcon } from './index'
+
+figma.connect(
+  ContextMenuIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=768-47027', 
+  {
+    example: () => <ContextMenuIcon />
+  }
+)

src/icons/ContractIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ContractIcon } from './index'
+
+figma.connect(
+  ContractIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=2146-25148', 
+  {
+    example: () => <ContractIcon />
+  }
+)

src/icons/DashedCircleIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { DashedCircleIcon } from './index'
+
+figma.connect(
+  DashedCircleIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=848-57511', 
+  {
+    example: () => <DashedCircleIcon />
+  }
+)

src/icons/DiscordIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { DiscordIcon } from './index'
+
+figma.connect(
+  DiscordIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=23094-59442', 
+  {
+    example: () => <DiscordIcon />
+  }
+)

src/icons/ExpandIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ExpandIcon } from './index'
+
+figma.connect(
+  ExpandIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-22079', 
+  {
+    example: () => <ExpandIcon />
+  }
+)

src/icons/ExternalLinkIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ExternalLinkIcon } from './index'
+
+figma.connect(
+  ExternalLinkIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=830-46613', 
+  {
+    example: () => <ExternalLinkIcon />
+  }
+)

src/icons/FacebookIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { FacebookIcon } from './index'
+
+figma.connect(
+  FacebookIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=10594-539', 
+  {
+    example: () => <FacebookIcon />
+  }
+)

src/icons/GasTankIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { GasTankIcon } from './index'
+
+figma.connect(
+  GasTankIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=2146-25160', 
+  {
+    example: () => <GasTankIcon />
+  }
+)

src/icons/GoogleIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { GoogleIcon } from './index'
+
+figma.connect(
+  GoogleIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=10594-538', 
+  {
+    example: () => <GoogleIcon />
+  }
+)

src/icons/QrCodeIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { QrCodeIcon } from './index'
+
+figma.connect(
+  QrCodeIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21878', 
+  {
+    example: () => <QrCodeIcon />
+  }
+)

src/icons/SendIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { SendIcon } from './index'
+
+figma.connect(
+  SendIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21862', 
+  {
+    example: () => <SendIcon />
+  }
+)

src/icons/SignoutIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { SignoutIcon } from './index'
+
+figma.connect(
+  SignoutIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-22019', 
+  {
+    example: () => <SignoutIcon />
+  }
+)

src/icons/SubtractIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { SubtractIcon } from './index'
+
+figma.connect(
+  SubtractIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=2159-27742', 
+  {
+    example: () => <SubtractIcon />
+  }
+)

src/icons/TransactionIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { TransactionIcon } from './index'
+
+figma.connect(
+  TransactionIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=453-21932', 
+  {
+    example: () => <TransactionIcon />
+  }
+)

src/icons/TwitchIcon.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { TwitchIcon } from './index'
+
+figma.connect(
+  TwitchIcon,
+  'https://figma.com/file/0OB1JVXSqaxmJDrP7qAMJr/?node-id=10594-540', 
+  {
+    example: () => <TwitchIcon />
+  }
+)