Bumps svgr from v5 to v8

.changeset/itchy-friends-change.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/icon': minor
+---
+
+Bumps svgr dependency from v5 to v8

packages/icon/package.json

@@ -43,7 +43,7 @@
     "@lg-tools/build": "workspace:^",
     "@lg-tools/lint": "workspace:^",
     "@lg-tools/storybook-utils": "workspace:^",
-    "@svgr/core": "^5.3.1",
+    "@svgr/core": "^8.1.0",
     "@types/xml2json": "^0.11.0",
     "commander": "^11.0.0",
     "rollup": "4.16.1",

packages/icon/scripts/prebuild/index.ts

@@ -1,15 +1,14 @@
 /* eslint-disable no-console */
 import { formatLG } from '@lg-tools/lint';
-// @ts-ignore - no types in svgr v5.5 // TODO: update to v8 LG-5484
-import { default as svgr } from '@svgr/core';
+import { transform } from '@svgr/core';
 import { Command } from 'commander';
 import fs from 'fs';
 import path from 'path';
 
 import { getChecksum } from './checksum';
 import { indexTemplate } from './indexTemplate';
+import { applyLeafyGreenTemplate } from './leafyGreenTemplate';
 import { FileObject, PrebuildOptions } from './prebuild.types';
-import { svgrTemplate } from './svgrTemplate';
 
 const SRC_PATH = path.resolve(__dirname, '..', '..', 'src');
 
@@ -117,32 +116,52 @@ function makeFileProcessor(outputDir: string, options?: PrebuildOptions) {
       encoding: 'utf8',
     });
 
-    // Note: must use `require` since svgrrc is a CommonJS module
-    // @ts-ignore - svgrrc is not typed
-    const svgrrc = await require('../../.svgrrc.js');
-
-    const processedSVGR = await svgr(
+    // Generate basic React component first
+    const processedSVGR = await transform(
       svgContent,
       {
-        ...svgrrc,
-        template: svgrTemplate,
-      },
-      {
-        componentName: file.name,
+        plugins: ['@svgr/plugin-jsx'],
+        typescript: true,
+        jsx: {
+          babelConfig: {
+            plugins: [
+              [
+                '@svgr/babel-plugin-replace-jsx-attribute-value',
+                {
+                  values: [
+                    { value: '#000', newValue: 'currentColor' },
+                    { value: '#000000', newValue: 'currentColor' },
+                    { value: 'black', newValue: 'currentColor' },
+                  ],
+                },
+              ],
+            ],
+          },
+        },
       },
+      { componentName: file.name },
     );
 
+    // Apply custom LeafyGreen wrapper using template
+    const customizedSVGR = applyLeafyGreenTemplate(processedSVGR, file.name);
     const scriptPath =
       'packages/icon/' +
       path.relative(path.resolve(__dirname, process.cwd()), __filename);
 
-    const checksum = getChecksum(svgContent, processedSVGR);
+    if (!customizedSVGR) {
+      throw new Error(
+        `SVGR transformation failed for file "${file.name}.svg". The component could not be generated.`,
+      );
+    }
+
+    const finalContent = customizedSVGR;
+    const checksum = getChecksum(svgContent, finalContent);
 
     const outfilePath = path.resolve(outputDir, `${file.name}.tsx`);
     const annotatedFileContent = annotateFileContent(
       scriptPath,
       checksum,
-      processedSVGR,
+      finalContent,
     );
 
     if (options?.verbose) {

packages/icon/scripts/prebuild/leafyGreenTemplate.ts

@@ -0,0 +1,69 @@
+/**
+ * LeafyGreen template transformation for SVGR-generated components
+ * This replaces the previous inline regex with a more maintainable template approach
+ */
+
+export function applyLeafyGreenTemplate(
+  svgrOutput: string,
+  componentName: string,
+): string {
+  // This pattern matches the standard SVGR TypeScript output structure
+  const svgrPattern =
+    /import \* as React from "react";\nimport type \{ SVGProps \} from "react";\nconst (\w+) = \(props: SVGProps<SVGSVGElement>\) => (.*?);\nexport default \1;/s;
+
+  const leafyGreenTemplate = `import * as React from 'react';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+
+export interface $1Props extends LGGlyph.ComponentProps {}
+
+const $1 = ({
+  className,
+  size = 16,
+  title,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: $1Props) => {
+  const fillStyle = css\`
+    color: \${fill};
+  \`;
+
+  const noFlexShrink = css\`
+    flex-shrink: 0;
+  \`;
+
+  const accessibleProps = generateAccessibleProps(role, '${componentName}', { 
+    title, 
+    'aria-label': ariaLabel, 
+    'aria-labelledby': ariaLabelledby 
+  });
+
+  const svgElement = $2;
+
+  return React.cloneElement(svgElement, {
+    className: cx(
+      {
+        [fillStyle]: fill != null,
+      },
+      noFlexShrink,
+      className,
+    ),
+    height: typeof size === 'number' ? size : sizeMap[size],
+    width: typeof size === 'number' ? size : sizeMap[size],
+    role,
+    ...accessibleProps,
+    ...props,
+  });
+};
+
+$1.displayName = '${componentName}';
+$1.isGlyph = true;
+
+export default $1;`;
+
+  return svgrOutput.replace(svgrPattern, leafyGreenTemplate);
+}