How to Configure Vite Globals for UMD Build (ex. React-Icons)

[portfolio-y0711]

Hello. I am developing a UI using MUI in React-Google-Apps-Script with the boilerplate you provided. First, I would like to express my gratitude for carefully creating the README file and the package.json scripts, which are easy for beginners like me to follow. I mainly develop with MUI, but since the mui/material-icons library does not provide a UMD build, I found a library called React-Icons that offers a UMD build and I plan to use it as a replacement.

React-Icons https://www.jsdelivr.com/package/npm/@oxygen-ui/react-icons

However, since I am not very familiar with using globals in Vite settings and UMD-style builds, I am unsure how to instruct the globals in the Vite config after loading the CDN in the HTML script tag as shown below.

Is there a specific naming convention I should follow?

[enuchi]

You should be fine to just import normally and not use from a CDN.

yarn add @oxygen-ui/react-icons then

import {HomeIcon} from '@oxygen-ui/react-icons';

function Demo() {
  return <HomeIcon size="small" />;
}

I didn't see significant difference in bundle size when importing an icon so they must have tree-shaking set up.

Couple other observations:

• I recommend using an established UI library with a lot of support. This one seems new and poorly documented (nothing on how to install).
• They haven't set up their type files correctly as far as I could tell.
• They haven't set up their UMD build correctly. The global variable should not have hyphens, but they expose it as oxygen-react-icons which doesn't work with vite's config.