@kylincloud/flamegraph 0.35.27 → 0.35.29

package/src/FlameGraph/FlameGraphComponent/index.tsx

@@ -1,6 +1,6 @@
 // src/FlameGraph/FlameGraphComponent/index.tsx
 /* eslint-disable no-unused-expressions, import/no-extraneous-dependencies */
-import React, { useCallback, useRef, useMemo } from 'react';
+import React, { useCallback, useRef, useMemo, useEffect } from 'react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
@@ -28,6 +28,8 @@ import type { ViewTypes } from './viewTypes';
 import { FitModes, HeadMode, TailMode } from '../../fitMode/fitMode';
 import indexStyles from './styles.module.scss';
 import { useFlamegraphI18n } from '../../i18n';
+import { createFlamegraphRenderWorker } from '../../workers/createFlamegraphRenderWorker';
+import type { CanvasI18nMessages } from './Flamegraph_render';
 
 interface FlamegraphProps {
   flamebearer: Flamebearer;
@@ -78,11 +80,20 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
   const textCanvasRef = React.useRef<HTMLCanvasElement>(null);
   const flamegraph = useRef<Flamegraph>();
   const flamegraphText = useRef<Flamegraph>();
+  const renderSeq = useRef(0);
+  const renderWorkerRef = useRef<Worker | null>(null);
+  const rectOffscreenRef = useRef<OffscreenCanvas | null>(null);
+  const textOffscreenRef = useRef<OffscreenCanvas | null>(null);
+  const workerReadyRef = useRef({ rect: false, text: false });
   const i18n = useFlamegraphI18n();
   const resizeLogRef = useRef({
     lastWidth: 0,
     lastHeight: 0,
   });
+  const useRenderWorker =
+    typeof window !== 'undefined' &&
+    typeof OffscreenCanvas !== 'undefined' &&
+    'transferControlToOffscreen' in HTMLCanvasElement.prototype;
 
   // ====== 新增：提取 canvas 渲染需要的 i18n messages ======
   const canvasMessages = useMemo(
@@ -94,6 +105,19 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     [i18n.collapsedLevelsSingular, i18n.collapsedLevelsPlural, i18n.location]
   );
 
+  const serializePalette = useCallback(
+    (p: FlamegraphPalette) => ({
+      name: p.name,
+      goodColor: p.goodColor.rgb().array() as [number, number, number],
+      neutralColor: p.neutralColor.rgb().array() as [number, number, number],
+      badColor: p.badColor.rgb().array() as [number, number, number],
+      colors: p.colors.map(
+        (c) => c.rgb().array() as [number, number, number]
+      ),
+    }),
+    []
+  );
+
   const [rightClickedNode, setRightClickedNode] = React.useState<
     Maybe<{ top: number; left: number; width: number }>
   >(Maybe.nothing());
@@ -129,6 +153,29 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     []
   );
 
+  useEffect(() => {
+    if (!useRenderWorker) {
+      return () => {};
+    }
+    const worker = createFlamegraphRenderWorker();
+    renderWorkerRef.current = worker;
+    // eslint-disable-next-line no-console
+    console.debug('[flamegraph] render worker created');
+    setTimeout(() => {
+      renderRectCanvas();
+      renderTextCanvas();
+    }, 0);
+    return () => {
+      worker.terminate();
+      renderWorkerRef.current = null;
+      rectOffscreenRef.current = null;
+      textOffscreenRef.current = null;
+      workerReadyRef.current = { rect: false, text: false };
+      // eslint-disable-next-line no-console
+      console.debug('[flamegraph] render worker terminated');
+    };
+  }, [useRenderWorker]);
+
   useResizeObserver(canvasRef, () => {
     if (flamegraph) {
       if (canvasRef.current) {
@@ -328,6 +375,10 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
   );
 
   const constructCanvas = () => {
+    const seq = renderSeq.current + 1;
+    renderSeq.current = seq;
+    // eslint-disable-next-line no-console
+    console.time(`[flamegraph] constructCanvas #${seq}`);
     if (canvasRef.current) {
       const f = new Flamegraph(
         flamebearer,
@@ -355,8 +406,49 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
       );
       flamegraphText.current = f;
     }
+    // eslint-disable-next-line no-console
+    console.timeEnd(`[flamegraph] constructCanvas #${seq}`);
   };
 
+  const ensureRenderWorkerCanvases = useCallback(() => {
+    if (!useRenderWorker || !renderWorkerRef.current) {
+      return false;
+    }
+    const worker = renderWorkerRef.current;
+
+    if (canvasRef.current && !rectOffscreenRef.current) {
+      try {
+        const offscreen = canvasRef.current.transferControlToOffscreen();
+        rectOffscreenRef.current = offscreen;
+        worker.postMessage(
+          { type: 'init', payload: { kind: 'rect', canvas: offscreen } },
+          [offscreen]
+        );
+        workerReadyRef.current.rect = true;
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.debug('[flamegraph] rect transfer failed', err);
+      }
+    }
+
+    if (textCanvasRef.current && !textOffscreenRef.current) {
+      try {
+        const offscreen = textCanvasRef.current.transferControlToOffscreen();
+        textOffscreenRef.current = offscreen;
+        worker.postMessage(
+          { type: 'init', payload: { kind: 'text', canvas: offscreen } },
+          [offscreen]
+        );
+        workerReadyRef.current.text = true;
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.debug('[flamegraph] text transfer failed', err);
+      }
+    }
+
+    return true;
+  }, [useRenderWorker]);
+
   // ====== 修改：添加 canvasMessages 依赖 ======
   React.useEffect(() => {
     constructCanvas();
@@ -382,16 +474,73 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     renderTextCanvas();
   }, [highlightQuery]);
 
+  const postWorkerRender = (
+    kind: 'rect' | 'text',
+    options: { renderRects?: boolean; renderText?: boolean }
+  ) => {
+    if (!useRenderWorker) {
+      return false;
+    }
+    if (!renderWorkerRef.current) {
+      // eslint-disable-next-line no-console
+      console.debug('[flamegraph] worker not ready yet');
+      return true;
+    }
+    if (!ensureRenderWorkerCanvases()) {
+      return true;
+    }
+    const canvasEl =
+      kind === 'rect' ? canvasRef.current : textCanvasRef.current;
+    const width = canvasEl?.clientWidth || canvasEl?.width || 0;
+    const payload = {
+      kind,
+      flamebearer,
+      focusedNode: focusedNode.isJust ? focusedNode.value : null,
+      fitMode,
+      highlightQuery,
+      zoom: zoom.isJust ? zoom.value : null,
+      palette: serializePalette(palette),
+      messages: canvasMessages as CanvasI18nMessages,
+      renderRects: options.renderRects,
+      renderText: options.renderText,
+      width,
+      devicePixelRatio:
+        typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,
+    };
+    renderWorkerRef.current.postMessage({ type: 'render', payload });
+    return true;
+  };
+
   const renderRectCanvas = () => {
+    const seq = renderSeq.current;
+    if (postWorkerRender('rect', { renderText: false })) {
+      // eslint-disable-next-line no-console
+      console.debug(`[flamegraph] renderRects via worker #${seq}`);
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.time(`[flamegraph] renderRects #${seq}`);
     canvasRef?.current?.setAttribute('data-state', 'rendering');
     flamegraph?.current?.render({ renderText: false });
     canvasRef?.current?.setAttribute('data-state', 'rendered');
+    // eslint-disable-next-line no-console
+    console.timeEnd(`[flamegraph] renderRects #${seq}`);
   };
 
   const renderTextCanvas = () => {
+    const seq = renderSeq.current;
+    if (postWorkerRender('text', { renderRects: false })) {
+      // eslint-disable-next-line no-console
+      console.debug(`[flamegraph] renderText via worker #${seq}`);
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.time(`[flamegraph] renderText #${seq}`);
     textCanvasRef?.current?.setAttribute('data-state', 'rendering');
     flamegraphText?.current?.render({ renderRects: false });
     textCanvasRef?.current?.setAttribute('data-state', 'rendered');
+    // eslint-disable-next-line no-console
+    console.timeEnd(`[flamegraph] renderText #${seq}`);
   };
 
   const dataUnavailable =
@@ -418,67 +567,69 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
         'vertical-orientation': flamebearer.format === 'double',
       })}
     >
-      {breadcrumb && (
-        <FlamegraphBreadcrumb
-          totalValueText={breadcrumb.totalValueText}
-          totalSamplesText={breadcrumb.totalSamplesText}
-          samplesLabel={breadcrumb.samplesLabel}
-          unitLabel={breadcrumb.unitLabel}
-          hasFocus={breadcrumb.hasFocus}
-          focusPercent={breadcrumb.focusPercent}
-          focusLabel={breadcrumb.focusLabel}
-          ofTotalPlacement={breadcrumb.ofTotalPlacement}
-          ofTotalLabel={breadcrumb.ofTotalLabel}
-          clearFocusLabel={breadcrumb.clearFocusLabel}
-          onClearFocus={breadcrumb.onClearFocus}
-        />
-      )}
-      {/* Header 已简化，仅在 single 模式下显示标题 */}
-      {/* DiffLegend 已移到 Toolbar */}
-      {headerVisible && (
-        <Header
-          format={flamebearer.format}
-          units={flamebearer.units}
-          toolbarVisible={toolbarVisible}
-        />
-      )}
-      <div
-        data-testid={dataTestId}
-        style={{
-          position: 'relative',
-          opacity: dataUnavailable && !showSingleLevel ? 0 : 1,
-        }}
-      >
-        <canvas
-          height="0"
-          data-testid="flamegraph-canvas"
-          data-highlightquery={highlightQuery}
-          className={clsx('flamegraph-canvas', styles.canvas)}
-          ref={canvasRef}
-          onClick={!disableClick ? onClick : undefined}
-        />
-        <canvas
-          height="0"
-          data-testid="flamegraph-text-canvas"
-          className={clsx('flamegraph-text-canvas', styles.textCanvas)}
-          ref={textCanvasRef}
-        />
-        {flamegraph && canvasRef && (
-          <Highlight
-            barHeight={PX_PER_LEVEL}
-            canvasRef={canvasRef}
-            zoom={zoom}
-            xyToHighlightData={xyToHighlightData}
+      <div className={indexStyles.flamegraphFrame}>
+        {breadcrumb && (
+          <FlamegraphBreadcrumb
+            totalValueText={breadcrumb.totalValueText}
+            totalSamplesText={breadcrumb.totalSamplesText}
+            samplesLabel={breadcrumb.samplesLabel}
+            unitLabel={breadcrumb.unitLabel}
+            hasFocus={breadcrumb.hasFocus}
+            focusPercent={breadcrumb.focusPercent}
+            focusLabel={breadcrumb.focusLabel}
+            ofTotalPlacement={breadcrumb.ofTotalPlacement}
+            ofTotalLabel={breadcrumb.ofTotalLabel}
+            clearFocusLabel={breadcrumb.clearFocusLabel}
+            onClearFocus={breadcrumb.onClearFocus}
           />
         )}
-        {flamegraph && (
-          <ContextMenuHighlight
-            barHeight={PX_PER_LEVEL}
-            node={rightClickedNode}
+        {/* Header 已简化，仅在 single 模式下显示标题 */}
+        {/* DiffLegend 已移到 Toolbar */}
+        {headerVisible && (
+          <Header
+            format={flamebearer.format}
+            units={flamebearer.units}
+            toolbarVisible={toolbarVisible}
           />
         )}
+        <div
+          data-testid={dataTestId}
+          style={{
+            position: 'relative',
+            opacity: dataUnavailable && !showSingleLevel ? 0 : 1,
+          }}
+        >
+          <canvas
+            height="0"
+            data-testid="flamegraph-canvas"
+            data-highlightquery={highlightQuery}
+            className={clsx('flamegraph-canvas', styles.canvas)}
+            ref={canvasRef}
+            onClick={!disableClick ? onClick : undefined}
+          />
+          <canvas
+            height="0"
+            data-testid="flamegraph-text-canvas"
+            className={clsx('flamegraph-text-canvas', styles.textCanvas)}
+            ref={textCanvasRef}
+          />
+          {flamegraph && canvasRef && (
+            <Highlight
+              barHeight={PX_PER_LEVEL}
+              canvasRef={canvasRef}
+              zoom={zoom}
+              xyToHighlightData={xyToHighlightData}
+            />
+          )}
+          {flamegraph && (
+            <ContextMenuHighlight
+              barHeight={PX_PER_LEVEL}
+              node={rightClickedNode}
+            />
+          )}
+        </div>
+        {showCredit ? <LogoLink /> : ''}
       </div>
-      {showCredit ? <LogoLink /> : ''}
       {flamegraph && (
         <FlamegraphTooltip
           format={flamebearer.format}

package/src/FlameGraph/FlameGraphComponent/styles.module.scss

@@ -8,3 +8,11 @@
     margin-right: 10px;
   }
 }
+
+.flamegraphFrame {
+  border: 1px solid var(--ps-ui-border);
+  border-radius: 6px;
+  padding: 6px 8px 8px;
+  background-color: transparent;
+  min-height: var(--kylin-flamegraph-pane-min-height, 320px);
+}

package/src/FlameGraph/normalize.ts

@@ -14,16 +14,18 @@ export function normalize(p: {
   }
 
   if (p.profile) {
+    const profile = p.profile as Profile & { __kylinDecoded?: boolean };
     const copy = {
-      ...p.profile,
-      flamebearer: { ...p.profile.flamebearer },
+      ...profile,
+      flamebearer: { ...profile.flamebearer },
     };
 
-    // TODO: copy levels, since that's modified by decode
-    copy.flamebearer.levels = JSON.parse(
-      JSON.stringify(copy.flamebearer.levels)
-    );
-    decodeFlamebearer(copy);
+    // Avoid deep-cloning huge levels arrays; decode once in-place.
+    if (!profile.__kylinDecoded) {
+      decodeFlamebearer(copy);
+      profile.__kylinDecoded = true;
+      (copy as Profile & { __kylinDecoded?: boolean }).__kylinDecoded = true;
+    }
 
     const p2 = {
       ...copy,

package/src/FlameGraph/uniqueness.ts

@@ -4,81 +4,91 @@ export function isSameFlamebearer(
   prevFlame: Flamebearer,
   currFlame: Flamebearer
 ) {
-  // We first compare simple fields, since they are faster
-  if (prevFlame.format !== currFlame.format) {
-    return false;
-  }
+  const prevSig = getFlamebearerSignature(prevFlame);
+  const currSig = getFlamebearerSignature(currFlame);
+  return prevSig === currSig;
+}
 
-  if (prevFlame.numTicks !== currFlame.numTicks) {
-    return false;
+function hashNumbersSample(levels: Flamebearer['levels']) {
+  let hash = 2166136261;
+  const totalLevels = levels.length;
+  if (totalLevels === 0) {
+    return hash >>> 0;
   }
 
-  if (prevFlame.sampleRate !== currFlame.sampleRate) {
-    return false;
-  }
+  const sampleLevels = [0, Math.floor(totalLevels / 2), totalLevels - 1];
+  for (let s = 0; s < sampleLevels.length; s += 1) {
+    const idx = sampleLevels[s];
+    const level = levels[idx];
+    if (!level || level.length === 0) {
+      continue;
+    }
 
-  if (prevFlame.units !== currFlame.units) {
-    return false;
-  }
+    const take = Math.min(8, level.length);
+    for (let i = 0; i < take; i += 1) {
+      hash ^= level[i] | 0;
+      hash = Math.imul(hash, 16777619);
+    }
 
-  if (prevFlame.names?.length !== currFlame?.names.length) {
-    return false;
+    const tailStart = Math.max(0, level.length - take);
+    for (let i = tailStart; i < level.length; i += 1) {
+      hash ^= level[i] | 0;
+      hash = Math.imul(hash, 16777619);
+    }
   }
 
-  if (prevFlame.levels.length !== currFlame.levels.length) {
-    return false;
-  }
+  return hash >>> 0;
+}
 
-  // Most likely names is smaller, so let's start with it
-  // Are all names the same?
-  if (
-    !prevFlame.names.every((a, i) => {
-      return a === currFlame.names[i];
-    })
-  ) {
-    return false;
+function hashStringsSample(names: string[]) {
+  let hash = 2166136261;
+  const count = names.length;
+  if (count === 0) {
+    return hash >>> 0;
   }
 
-  if (!areLevelsTheSame(prevFlame.levels, currFlame.levels)) {
-    return false;
+  const take = Math.min(32, count);
+  const sampleIndices = [
+    ...Array.from({ length: take }, (_, i) => i),
+    ...Array.from({ length: take }, (_, i) => count - take + i),
+  ];
+
+  for (let i = 0; i < sampleIndices.length; i += 1) {
+    const name = names[sampleIndices[i]] || '';
+    for (let j = 0; j < name.length; j += 1) {
+      hash ^= name.charCodeAt(j);
+      hash = Math.imul(hash, 16777619);
+    }
   }
 
-  // Fallback in case new fields are added
-  return (
-    JSON.stringify({
-      ...prevFlame,
-      levels: undefined,
-      names: undefined,
-    }) ===
-    JSON.stringify({
-      ...currFlame,
-      levels: undefined,
-      names: undefined,
-    })
-  );
+  return hash >>> 0;
 }
 
-function areLevelsTheSame(
-  l1: Flamebearer['levels'],
-  l2: Flamebearer['levels']
-) {
-  if (l1.length !== l2.length) {
-    return false;
+function getFlamebearerSignature(flamebearer: Flamebearer) {
+  const cached = (flamebearer as any).__kylinSignature;
+  if (cached) {
+    return cached;
   }
 
-  // eslint-disable-next-line no-plusplus
-  for (let i = 0; i < l1.length; i++) {
-    if (l1[i].length !== l2[i].length) {
-      return false;
-    }
+  const extra = flamebearer as Flamebearer & {
+    leftTicks?: number;
+    rightTicks?: number;
+  };
 
-    // eslint-disable-next-line no-plusplus
-    for (let j = 0; j < l1[i].length; j++) {
-      if (l1[i][j] !== l2[i][j]) {
-        return false;
-      }
-    }
-  }
+  const signature = [
+    flamebearer.format,
+    flamebearer.numTicks,
+    flamebearer.sampleRate,
+    flamebearer.units,
+    flamebearer.maxSelf,
+    flamebearer.names?.length ?? 0,
+    flamebearer.levels?.length ?? 0,
+    extra.leftTicks ?? 'na',
+    extra.rightTicks ?? 'na',
+    hashNumbersSample(flamebearer.levels),
+    hashStringsSample(flamebearer.names || []),
+  ].join('|');
 
-  return true;
+  (flamebearer as any).__kylinSignature = signature;
+  return signature;
 }

package/src/Icons.tsx

@@ -2,27 +2,36 @@ import React from 'react';
 
 export const TableIcon = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-      <g id="z9nPJj.tif">
-        <path d="M62,13.33V49.68c-.02,.05-.04,.11-.05,.16-.3,2.66-2.66,5.16-6.08,5.15-15.92,0-31.83,0-47.75-.01-.54,0-1.1-.06-1.62-.19-2.73-.69-4.52-3.09-4.52-5.88,0-12,.01-23.56,.01-34.9,0-.29,.01-.57,.05-.86,.35-2.3,1.62-3.91,3.84-4.75,.6-.23,1.27-.28,1.9-.41,16.13,0,32.27,0,48.4,0,.09,.01,.17,.04,.26,.04,2.66,.21,4.8,2.01,5.4,4.57,.06,.24,.1,.48,.14,.72ZM28.99,31.81c0-3.92-.01-7.91-.01-11.81H8c0,3.91,.01,7.9,.01,11.81H28.99Zm27,0c0-3.92-.01-7.92-.01-11.81h-20.97c0,3.92,.01,7.91,.01,11.81h20.97Zm-47.98,5.19c0,3.7,0,8,0,11.69v.31H29v-12m6.01,.04c0,3.93-.01,8.05-.01,11.96h20.99c0-.12,0-.22,0-.31,0-3.7,0-7.99,0-11.69" />
-      </g>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="64 64 896 896"
+      fill="currentColor"
+    >
+      <path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 208H676V232h212v136zm0 224H676V432h212v160zM412 432h200v160H412V432zm200-64H412V232h200v136zm-476 64h212v160H136V432zm0-200h212v136H136V232zm0 424h212v136H136V656zm276 0h200v136H412V656zm476 136H676V656h212v136z" />
     </svg>
   );
 };
 
 export const TablePlusFlamegraphIcon = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-      <path d="M31,8.04H7.62c-.61,.13-1.26,.18-1.84,.41-2.14,.84-3.37,2.45-3.71,4.75-.04,.28-.05,.57-.05,.86,0,11.32-.02,22.88-.01,34.87,0,2.79,1.73,5.18,4.37,5.88,.51,.13,1.04,.19,1.57,.19,7.69,0,15.38,0,23.07,0V8.04Zm-2.92,11.99c0,3.9,.01,7.89,.01,11.8H7.82c0-3.9-.01-7.89-.01-11.8H28.08ZM7.82,49.01v-.31c0-3.69,0-7.99,0-11.68H28.1v11.99H7.82Z" />
-      <path d="M58.67,7.9h-25.67V55h2.9c1.84,0,2.9-1.55,2.9-3.45V27.14h11.6v6.37c0,1.91,1.49,3.45,3.33,3.45h4.94c1.84,0,3.33-1.55,3.33-3.45V11.35c0-1.91-1.49-3.45-3.33-3.45Z" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="64 64 896 896"
+      fill="currentColor"
+    >
+      <path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z" />
     </svg>
   );
 };
 
 export const FlamegraphIcon = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-      <path d="M5.44,8H58.56c1.9,0,3.44,1.54,3.44,3.44v6.16s0,9.6,0,9.6v6.36c0,1.9-1.54,3.44-3.44,3.44h-5.11c-1.9,0-3.44-1.54-3.44-3.44v-6.36h-12s0,9.8,0,9.8v9s0,5.56,0,5.56c0,1.9-1.1,3.44-3,3.44h-6c-1.9,0-3-1.54-3-3.44v-5.56h-9c-1.99,0-3-1.52-3-3.4v-5.6H5.44c-1.9,0-3.44-1.74-3.44-3.64v-6.16s0-9.6,0-9.6v-6.16c0-1.9,1.54-3.44,3.44-3.44Z" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="64 64 896 896"
+      fill="currentColor"
+    >
+      <path d="M834.1 469.2A347.49 347.49 0 00751.2 354l-29.1-26.7a8.09 8.09 0 00-13 3.3l-13 37.3c-8.1 23.4-23 47.3-44.1 70.8-1.4 1.5-3 1.9-4.1 2-1.1.1-2.8-.1-4.3-1.5-1.4-1.2-2.1-3-2-4.8 3.7-60.2-14.3-128.1-53.7-202C555.3 171 510 123.1 453.4 89.7l-41.3-24.3c-5.4-3.2-12.3 1-12 7.3l2.2 48c1.5 32.8-2.3 61.8-11.3 85.9-11 29.5-26.8 56.9-47 81.5a295.64 295.64 0 01-47.5 46.1 352.6 352.6 0 00-100.3 121.5A347.75 347.75 0 00160 610c0 47.2 9.3 92.9 27.7 136a349.4 349.4 0 0075.5 110.9c32.4 32 70 57.2 111.9 74.7C418.5 949.8 464.5 959 512 959s93.5-9.2 136.9-27.3A348.6 348.6 0 00760.8 857c32.4-32 57.8-69.4 75.5-110.9a344.2 344.2 0 0027.7-136c0-48.8-10-96.2-29.9-140.9zM713 808.5c-53.7 53.2-125 82.4-201 82.4s-147.3-29.2-201-82.4c-53.5-53.1-83-123.5-83-198.4 0-43.5 9.8-85.2 29.1-124 18.8-37.9 46.8-71.8 80.8-97.9a349.6 349.6 0 0058.6-56.8c25-30.5 44.6-64.5 58.2-101a240 240 0 0012.1-46.5c24.1 22.2 44.3 49 61.2 80.4 33.4 62.6 48.8 118.3 45.8 165.7a74.01 74.01 0 0024.4 59.8 73.36 73.36 0 0053.4 18.8c19.7-1 37.8-9.7 51-24.4 13.3-14.9 24.8-30.1 34.4-45.6 14 17.9 25.7 37.4 35 58.4 15.9 35.8 24 73.9 24 113.1 0 74.9-29.5 145.4-83 198.4z" />
     </svg>
   );
 };