fix: build

package.json

@@ -21,7 +21,7 @@
     "build-data1": "rimraf ./optimized/data && svgo --config=svgo.yaml -f ./svg/data1 -o ./optimized/data1 --pretty --indent=2",
     "build-data2": "rimraf ./optimized/data && svgo --config=svgo.yaml -f ./svg/data2 -o ./optimized/data2 --pretty --indent=2",
     "build-eggs": "rimraf ./optimized/eggs && svgo --config=svgo.yaml -f ./svg/eggs -o ./optimized/eggs --pretty --indent=2",
-    "build-react": "node ./scripts/build.js react",
+    "build-react": "node ./scripts/build.js icons-react",
     "build-vue": "node ./scripts/build.js vue",
     "clean": "rimraf lib build dist tsconfig.tsbuildinfo optimized/data1 optimized/data2 optimized/eggs react/data1 react/data2 react/eggs",
     "dev": "vite",
@@ -46,7 +46,7 @@
     "@types/react": "18.2.12",
     "@types/react-dom": "18.2.5",
     "@types/styled-components": "^5.1.26",
-    "@vitejs/plugin-react": "2.0.0",
+    "@vitejs/plugin-react": "4.3.3",
     "@vue/compiler-dom": "^3.0.5",
     "autoprefixer": "^10.4.14",
     "camelcase": "^6.0.0",
@@ -57,8 +57,8 @@
     "rimraf": "^3.0.2",
     "svgo": "^1.3.2",
     "typescript": "5.0.3",
-    "vite": "3.0.0-beta.5",
-    "vite-plugin-svgr": "3.2.0"
+    "vite": "5.4.11",
+    "vite-plugin-svgr": "4.3.0"
   },
   "resolutions": {
     "react": "18.2.0",

scripts/build.js

@@ -1,16 +1,22 @@
-const fs = require('fs').promises
-const camelcase = require('camelcase')
-const cheerio = require('cheerio')
-const { promisify } = require('util')
-const rimraf = promisify(require('rimraf'))
-const svgr = require('@svgr/core').default
-const babel = require('@babel/core')
+const fs = require('fs').promises;
+
+const camelcase = require('camelcase');
+const cheerio = require('cheerio');
+const { promisify } = require('util');
+
+const rimraf = promisify(require('rimraf'));
+
+const svgr = require('@svgr/core').default;
+
+const babel = require('@babel/core');
+
 const { compile: compileVue } = require('@vue/compiler-dom')
+
 const { dirname } = require('path')
 
 let transforms = {
 
-  react: async (svg, componentName, format, style) => {
+  'icons-react': async (svg, componentName, format, style) => {
 
     let component = await svgr(svg, { ref: true, titleProp: true }, { componentName })
     let { code } = await babel.transformAsync(component, {
@@ -58,7 +64,7 @@ let transforms = {
       .replace('export default', 'module.exports =')
   },
 
-  vue: (svg, componentName, format) => {
+  'icons-vue': (svg, componentName, format) => {
     let { code } = compileVue(svg, {
       mode: 'module',
     })

src/DatalayerIcons.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import { CTABanner, Button } from "@primer/react-brand";
 import { ThemeProvider, BaseStyles, IconButton, Text, Box, Link, TextInput, Tooltip, Flash } from "@primer/react";
 import { SearchIcon } from "@primer/octicons-react";
@@ -7,8 +7,8 @@ import styled from "styled-components";
 
 import { MinimalFooter } from "./footer/MinimalFooter";
 
-import * as dataIcons from "../react";
-import * as eggsIcons from "../react/eggs";
+import * as dataIcons from "../icons-react";
+import * as eggsIcons from "../icons-react/eggs";
 
 import '@primer/react-brand/lib/css/main.css'
 

src/footer/MinimalFooter.tsx

@@ -1,8 +1,8 @@
-import React, {PropsWithChildren} from 'react';
+import { isValidElement, cloneElement, Children, PropsWithChildren } from 'react';
 import clsx from 'clsx';
-import {Stack, Text, useTheme} from '@primer/react-brand';
-import {DatalayerGreenIcon} from '../../react';
-import {BaseProps} from './component-helpers';
+import { Stack, Text, useTheme } from '@primer/react-brand';
+import { DatalayerGreenIcon } from '../../icons-react';
+import { BaseProps } from './component-helpers';
 
 /**
  * Design tokens
@@ -52,8 +52,8 @@ function Root({
 }: PropsWithChildren<MinimalFooterProps>) {
   // find Footer.Footnotes children
   const footerFootnoteChild = () => {
-    const footnotes = React.Children.toArray(children).find(child => {
-      if (!React.isValidElement(child)) {
+    const footnotes = Children.toArray(children).find(child => {
+      if (!isValidElement(child)) {
         return false
       }
 
@@ -68,10 +68,10 @@ function Root({
    * Renders a maximum of 5 links.
    * If more than 5 links are required, we should encourage usage of Footer instead.
    */
-  const LinkChildren = React.Children.toArray(children)
+  const LinkChildren = Children.toArray(children)
     .filter(child => {
       // if not valid element
-      if (React.isValidElement(child)) {
+      if (isValidElement(child)) {
         if (child.type === Link) {
           return child
         }
@@ -123,14 +123,14 @@ function Root({
 type FootnoteProps = BaseProps<HTMLElement>
 
 function Footnotes({children, className}: PropsWithChildren<FootnoteProps>) {
-  const styledChildren = React.Children.map(children, child => {
+  const styledChildren = Children.map(children, child => {
     // if not valid element
-    if (!React.isValidElement(child)) {
+    if (!isValidElement(child)) {
       return child
     }
 
     if (child.type && child.type === Text) {
-      return React.cloneElement(child as React.ReactElement, {
+      return cloneElement(child as React.ReactElement, {
         as: 'p',
         variant: 'muted',
         size: 200,

src/footer/component-helpers.tsx

@@ -1,5 +1,5 @@
-import React, {Ref, PropsWithChildren} from 'react'
-import {AnimateProps} from '@primer/react-brand'
+import { Ref, PropsWithChildren} from 'react'
+import { AnimateProps } from '@primer/react-brand'
 
 /**
  * Layout