在react native skia中使用expo矢量图标

Question

如何在react native skia中使用expo矢量图标。

我想使用这个图标，

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

谢谢。

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>