refactor(sync-figma): convert SVG with SVGR + svgo instead of regex

scripts/sync-figma/commands/sync-icons.ts

@@ -27,11 +27,14 @@ import {
     FIGMA_NODE_TYPES,
 } from '~/icons/constants';
 import { ICON_TYPES } from '~/icons/icon-types';
-import getIconComponent from '~/icons/templates/icon/icon-component';
 import getIconComponentIndex from '~/icons/templates/icon/icon-component-index';
 import getIconsIndex from '~/icons/templates/icon/icons-index';
 import type { IconNode } from '~/integrations/figma/lib';
-import { filterDocumentByNodeType, getIconJsx, getNodesWithUrl } from '~/integrations/figma/lib';
+import {
+    filterDocumentByNodeType,
+    getIconComponent,
+    getNodesWithUrl,
+} from '~/integrations/figma/lib';
 
 const TYPE = process.env.TYPE;
 
@@ -44,12 +47,11 @@ function findRoot(dir: string): string {
 }
 const CURRENT_DIRECTORY = findRoot(path.dirname(fileURLToPath(import.meta.url)));
 const FIGMA_EMOJI_PREFIX_PATTERN = /❤️\s*/g;
+// Resolve the repo's prettier config so generated files match what `pnpm format` produces,
+// plugins (import sorting) included.
 const PRETTIER_OPTIONS = {
+    ...(await prettier.resolveConfig(path.join(CURRENT_DIRECTORY, 'packages/icons/src/index.ts'))),
     parser: 'typescript',
-    tabWidth: 4,
-    semi: true,
-    singleQuote: true,
-    printWidth: 100,
 };
 
 function normalizeIconName(name: string) {
@@ -138,8 +140,7 @@ try {
                 parentId === decodeURIComponent(FIGMA_ICONS_SYMBOL_COLOR_NODE_ID) ||
                 parentId === decodeURIComponent(FIGMA_ICONS_SYMBOL_COLOR_COUNTRY_NODE_ID);
 
-            const iconJsx = await getIconJsx({ url, isColorIcon });
-            const IconComponent = getIconComponent(iconName, iconJsx);
+            const IconComponent = await getIconComponent({ url, iconName, isColorIcon });
             const formattedComponent = await prettier.format(IconComponent, PRETTIER_OPTIONS);
 
             let shouldWrite = isNewIcon;

scripts/sync-figma/package.json

@@ -5,13 +5,18 @@
     "description": "Internal CLI scripts for syncing assets from Figma",
     "type": "module",
     "scripts": {
+        "format": "prettier --write \"./{commands,src}/**/*.{ts,md}\"",
+        "format:check": "prettier --check \"./{commands,src}/**/*.{ts,md}\"",
         "lint": "eslint ./commands ./src",
         "notify:slack": "tsx ./commands/notify-slack.ts",
         "sync-icons:basic": "TYPE=basic tsx --env-file-if-exists=.env ./commands/sync-icons.ts",
         "sync-icons:symbol": "TYPE=symbol tsx --env-file-if-exists=.env ./commands/sync-icons.ts",
         "typecheck": "tsc --noEmit"
     },
     "dependencies": {
+        "@svgr/core": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0",
+        "@svgr/plugin-svgo": "^8.1.0",
         "lodash-es": "^4.18.1",
         "p-limit": "^6.2.0",
         "picocolors": "^1.1.1",