CSS in JSでcontentプロパティにSVGコンポーネントを挿入する方法

data:image/svg+xml, + SVGのXMLコードをURLエンコードしたもの

// SvgComponentToDataUrlScheme.ts
import type { ReactElement } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';

export const SvgComponentToDataUrlScheme = (Component: ReactElement) => {
  // 1. Reactコンポーネントを純粋なSVGマークアップ文字列に変換
  const SVG = renderToStaticMarkup(Component);
  // 2. SVGマークアップをURLエンコード
  const encodedSvg = encodeURIComponent(svgMarkup);
  // 3. データURIスキームの接頭辞と結合して返す
  return `data:image/svg+xml,${encodedSvg}`;
};

import { SvgComponentToDataUrlScheme } from '@/lib/SvgComponentToDataUrlScheme';
import { ExternalLinkIcon } from '@radix-ui/react-icons';
import { css } from '@emotion/react';

const IconExternalLink = SvgComponentToDataUrlScheme(<ExternalLinkIcon />);

export const IconExternalLinkStyle = css`
  &::before {
    display: inline-block;
    margin-left: 0.15em;
    vertical-align: middle;
    content: url(${IconExternalLink});
  }
`;

import { renderToString } from 'react-dom/server';
import App from './App';

export function render(url, context) {
  return renderToString(<App />);
}

/**
 * Render a React element to its initial HTML. This should only be used on the server.
 * React will return an HTML string. You can use this method to generate HTML on the server
 * and send the markup down on the initial request for faster page loads and to allow search
 * engines to crawl your pages for SEO purposes.
 *
 * If you call `ReactDOMClient.hydrateRoot()` on a node that already has this server-rendered markup,
 * React will preserve it and only attach event handlers, allowing you
 * to have a very performant first-load experience.
 */

/**
 * React 要素を初期 HTML にレンダーします。これはサーバーでのみ使用する必要があります。
 * React は HTML 文字列を返します。このメソッドを使用して、HTML をサーバー上で生成し、
 * 初期リクエストでマークアップをダウンロードしてページの読み込みを高速化し、
 * 検索エンジンが SEO の目的でページをクロールできるようにすることができます。
 *
 * `ReactDOMClient.hydrateRoot()` をすでにこのサーバー側レンダリングされたマークアップを持つノードで呼び出すと、
 * React はそれを保持し、イベントハンドラーのみをアタッチして、
 * パフォーマンスの高い初回読み込み体験を提供できます。
 */
export function renderToString(element: ReactElement, options?: ServerOptions): string;

/**
 * Similar to `renderToString`, except this doesn't create extra DOM attributes
 * such as `data-reactid`, that React uses internally. This is useful if you want
 * to use React as a simple static page generator, as stripping away the extra
 * attributes can save lots of bytes.
 */

/**
 * `renderToString` と似ていますが、内部で React が使用する `data-reactid` などの
 * 追加の DOM 属性を作成しません。これは、React を単純な静的ページジェネレータとして
 * 使用する場合に便利で、余分な属性を削除することで多くのバイトを節約できます。
 */
export function renderToStaticMarkup(element: ReactElement, options?: ServerOptions): string;