How to dynamically load icons?

[twilio-jyoung]

I am building content in a CMS, and need to be able to allow users to pick the Icons they would like to use.

Can you add a code sample to the docs that just takes the icon name as a parameter and lazy loads the icon?

I was able to get it working, but with boatloads of warnings.

localhost-1666634838384.log

paste-icon-loader.js

import { lazy, Suspense } from "react";

const iconData = require("@twilio-paste/icons/json/icons.json");

export default async function getIcon(name, iconProps) {
	let iconName = `${name}Icon`;

	// check to make sure the icon name is valid
	if (typeof iconData.icons.find((x) => x.name == iconName) === undefined) {
		console.log(
			`unable to find ${iconName} in the list of available icons from paste`
		);
		return null;
	}

	// lazy load the icon
	let PasteIcon = lazy(() =>
		import(
			/* webpackMode: "eager" */ `@twilio-paste/icons/esm/${iconName}`
		).then((module) => ({
			default: module[iconName],
		}))
	);

	// set required props if none passed in
	if (!iconProps) iconProps = {};
	if (!iconProps.decorative) iconProps.decorative = true;
	if (!iconProps.title) iconProps.title = "default title";

	// build suspense wrapper around lazy load component
	let result = (
		<Suspense fallback={<div>Loading...</div>} key={iconName}>
			<PasteIcon {...iconProps} key={iconName} />
		</Suspense>
	);

	return result;
}

another-file.js

		let iconComponent = await getIcon("Accept", {
			decorative: false,
			title: "Accept Icon",
			size: "sizeIcon30",
		});
		
		flex.MainHeader.Content.add(iconComponent);

[gloriliale]

Hi @twilio-jyoung! It looks like twilio-flex.min.js is loading in d.ts files. Is there a reason those are being bundled into your build and loaded into the browser?

[TheSisb]

Hi @twilio-jyoung,

The error seems to be around *.d.ts files:

These files should not be loaded by the browser, they're used by Typescript for typechecking at dev and build time. Those errors seem to be warning at run-time, which is expected if those files somehow get bundled into twilio-flex.min.js.

I don't think this is something we can fix from our end; no one else has reporting this so far. My hunch is this is a configuration issue with your build pipeline.

[twilio-jyoung]

can you provide a code sample in the docs showing what I am attempting? i need to dynamically load the icon at runtime given only the icon name.

[TheSisb]

Here's an example of how they're doing it in Console

import { Spinner, SpinnerProps } from "@twilio-paste/core/spinner";
import { ErrorIcon } from "@twilio-paste/icons/esm/ErrorIcon";
import { IconWrapperProps } from "@twilio-paste/icons/esm/helpers/IconWrapper";
import React, { Component, ReactNode, Suspense } from "react";
import { useTranslation } from "react-i18next";

import { safeLazyLoad } from "../../shared/helpers/safeLazyLoad";

interface IconErrorBoundaryProps {
  children: ReactNode;
}
interface IconErrorBoundaryState {
  hasError: boolean;
}

class IconErrorBoundary extends Component<
  IconErrorBoundaryProps,
  IconErrorBoundaryState
> {
  constructor(props: IconErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(): IconErrorBoundaryState {
    return { hasError: true };
  }

  render(): JSX.Element | ReactNode {
    if (this.state.hasError) {
      // NOTE: not sure if showing another icon here
      //       is enough signal to the developer that
      //       something went wrong. Though there is
      //       a wall of error text on the console.
      return (
        <ErrorIcon
          title="an error occurred"
          color="colorTextError"
          decorative
        />
      );
    }

    return this.props.children;
  }
}

type IconLoaderProps = Omit<SpinnerProps, "title"> &
  IconWrapperProps & {
    icon: string;
    title?: string;
    decorative: boolean;
  };
const IconLoader: React.FC<IconLoaderProps> = React.memo(
  ({ icon, ...iconProps }: IconLoaderProps) => {
    const AsyncIcon = safeLazyLoad(
      import(`@twilio-paste/icons/esm/${icon}.js`).then((c) => ({
        default: c[icon],
      }))
    );
    const { t } = useTranslation("common");
    return (
      <IconErrorBoundary>
        <Suspense
          fallback={
            <Spinner
              size="sizeIcon30"
              {...iconProps}
              title={t("Loading")}
              decorative
            />
          }
        >
          <AsyncIcon icon={icon} {...iconProps} />
        </Suspense>
      </IconErrorBoundary>
    );
  }
);
export { IconLoader };

[twilio-jyoung]

this looks like what I need, would you mind pointing me to safeLazyLoad?

[TheSisb]

Sent on Slack 👍 Glad to be able to help!