Content Hubアイコンを表示する

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

この例では、Externalコンポーネントを設定して、Content Hubアイコンを表示および使用する方法を示します。

import ReactDOM from "react-dom";
import IconComponent from "./IconComponent";

export default function createExternalRoot(container: HTMLElement) {
  return {
    render({
      icon,
    }: {
      icon: {
        insertContentHubIconInElement: (
          icon: string,
          htmlElement: HTMLElement
        ) => Promise<void>;
      };
    }) {
      const { insertContentHubIconInElement } = icon;

      ReactDOM.render(
        <div style={{ fontSize: "24px" }}>
          <IconComponent
            insertIconInElement={insertContentHubIconInElement}
            iconName="trash"
          />
          <IconComponent
            insertIconInElement={insertContentHubIconInElement}
            iconName="star"
          />
          <IconComponent
            insertIconInElement={insertContentHubIconInElement}
            iconName="star"
          />
        </div>,
        container
      );
    },
    unmount() {
      ReactDOM.unmountComponentAtNode(container);
    },
  };
}

import { css } from "@emotion/css";
import { FC, useEffect, useRef, useState } from "react";

const svgStyles = css({
  lineHeight: 1,
  height: "1em",
  display: "inline-block",
  "& svg": {
    width: "1em",
    height: "1em",
    position: "sticky",
    zIndex: 1,
    verticalAlign: "bottom",
    userSelect: "none",
    fill: "currentColor",
    color: "currentColor",
  },
  "& path[stroke]": {
    stroke: "currentColor",
    fill: "transparent",
  },
});

interface IconComponentProps {
  insertIconInElement: (
    icon: string,
    htmlElement: HTMLElement
  ) => Promise<void>;
  iconName: string;
}

const IconComponent: FC<IconComponentProps> = ({
  insertIconInElement,
  iconName,
}) => {
  const iconRef = useRef<HTMLElement | null>(null);

  useEffect(() => {
    const loadSvgIcon = async (): Promise<void> => {
      if (iconRef.current) {
        await insertIconInElement(iconName, iconRef.current);
      }
    };

    if (iconName) {
      void loadSvgIcon();
    }
  }, [iconName]);

  return <i ref={iconRef} className={svgStyles} />;
};

export default IconComponent;

この記事を改善するための提案がある場合は、お知らせください!