在反應原生skia中使用expo矢量圖標？

Question

如何在反應原生滑雪中使用 expo 矢量圖標。

我想用這個圖標，

<Ionicons name="md-checkmark-circle" size={32} color="green" />在skia Canvas 或 Box

謝謝。

Answer 1

您不能直接使用矢量圖標，但可以將圖標添加為SVG圖像，如下所示：

import {
  Canvas,
  ImageSVG,
  useSVG
} from "@shopify/react-native-skia";
 
const ImageSVGDemo = () => {
  // Alternatively, you can pass an SVG URL directly
  // for instance: const svg = useSVG("https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg");
  const svg = useSVG(require("../../assets/checkmark.svg"));
  return (
    <Canvas style={{ flex: 1 }}>
      { svg && (
        <ImageSVG
          svg={svg}
          x={0}
          y={0}
          width={256}
          height={256}
        />)
      }
    </Canvas>
  );
};

和checkmark.svg文件將是：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 16.518l-4.5-4.319 1.396-1.435 3.078 2.937 6.105-6.218 1.421 1.409-7.5 7.626z"/></svg>