How to use the @codesandbox/common/lib/templates/icons function in @codesandbox/common

{templates.map(({ name, niceName }, i) => {
                const TIcon = getIcon(name);

                return (
                   {
                      this.setTemplate(templates[i]);
                    }}
                    as="button"
                    aria-label={`${niceName} template`}
                  >
                    
                  
                );

{sandboxes.map((s, i) => {
        // TODO: investigate type mismatch between SmallSandbox and getIcon
        // @ts-ignore
        const Icon = getIcon(s.template);

        return (
          
            
              {/* We should probably use the Sandbox interface instead
                 * of SmallSandbox
                // @ts-ignore */}
              {getSandboxName(s)}
              
            
            {format(new Date(s.insertedAt), 'MMM dd, yyyy')}
            {format(new Date(s.updatedAt), 'MMM dd, yyyy')}
            
              
            
            {s.likeCount}

render() {
    const { templates } = this.props;
    const template = templates[this.state.templateIndex];
    const additionalInfo = TEMPLATE_SUPPORT[template.name] || {
      loaders: [],
      css: [],
      description: `Used for ${template.niceName} development, based on: `,
    };
    const TemplateIcon = getIcon(template.name);

    return (
      
        
          
            
              {templates.map(({ name, niceName }, i) => {
                const TIcon = getIcon(name);

                return (
                   {

{sandboxes.map((s, i) => {
        const Icon = getIcon(s.template);
        return (
          
            
              {s.title || s.id}
              
            
            {moment(s.insertedAt).format('ll')}
            {moment(s.updatedAt).format('ll')}
            
              
            
            {s.likeCount}
            {s.viewCount}
            {s.forkCount}
            {isCurrentUser && (

title,
  iconUrl,
  environment,
  official,
  color,
  focused,
  detailText,
  onClick,
  onFocus,
  onKeyPress,
  onMouseOver,
  DetailComponent,
}) => {
  const UserIcon: React.FunctionComponent =
    iconUrl && Icons[iconUrl] ? Icons[iconUrl] : getColorIcons(environment);
  const OfficialIcon: React.FunctionComponent = getColorIcons(environment);
  const parsedEnvironment = getEnvironment(environment);

  const elRef = React.useRef();

  React.useEffect(() => {
    const inputHasFocus =
      document.activeElement && document.activeElement.tagName === 'INPUT';
    if (focused && elRef.current && !inputHasFocus) {
      elRef.current.focus();
    }
  }, [focused]);

  return (

render() {
    const { sandbox } = this.state;
    const Icon = sandbox ? getIcon(sandbox.template) : Fragment;
    const template = sandbox ? getTemplate(sandbox.template) : {};

    return (
      
        
          {this.props.openPreviousSandbox && (
            
          )}
          {this.props.openNextSandbox && (
            
          )}

const {
    actions: {
      workspace: { editTemplate },
    },
    state: {
      editor: {
        currentSandbox: { customTemplate, template },
      },
    },
  } = useOvermind();
  const popover = usePopoverState();
  const [selectedIcon, setSelectedIcon] = useState(
    customTemplate.iconUrl || ''
  );

  const DefaultIcon = getIcon(template);
  const defaultColor =
    customTemplate.color || templates.default(template).color();

  const setIcon = (key: string) => {
    setSelectedIcon(key);

    popover.hide();

    editTemplate({ ...customTemplate, iconUrl: key });
  };
  const TemplateIcon = Icons[selectedIcon];

  return (
    
      Icon

const TemplateIcon = ({
  iconUrl,
  environment,
}: {
  iconUrl: string;
  environment: Template;
}) => {
  const UserIcon: React.FunctionComponent =
    Icons[iconUrl] || getIcon(environment.name);

  return (
    
      
    
  );
};

export const SandboxCard: React.FC = ({
  title,
  iconUrl,
  environment,
  official,
  color,
  focused,
  detailText,
  onClick,
  onFocus,
  onKeyPress,
  onMouseOver,
  DetailComponent,
}) => {
  const UserIcon: React.FunctionComponent =
    iconUrl && Icons[iconUrl] ? Icons[iconUrl] : getColorIcons(environment);
  const OfficialIcon: React.FunctionComponent = getColorIcons(environment);
  const parsedEnvironment = getEnvironment(environment);

  const elRef = React.useRef();

  React.useEffect(() => {
    const inputHasFocus =
      document.activeElement && document.activeElement.tagName === 'INPUT';
    if (focused && elRef.current && !inputHasFocus) {
      elRef.current.focus();
    }
  }, [focused]);

  return (