撰写多平台：存储和加载 svg 图标

Question

有没有办法在 Compose 多平台本地存储和加载 svg 图标？ 我正在寻找一个可在两个平台上运行的多平台解决方案：android 和 ios。

提前致谢

Answer 1

虽然这个问题是不久前提出的，但答案可能仍然有用。 这是我的方法： 如果您使用 Compose Multiplatform 库的 Coil 图像加载 库，它包括 SVG 解码器支持 支持。

您可以下载并存储SVG文件，并按如下方式加载它们：

// SVG text example
val svgString = "<svg height=\"100\" width=\"100\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
                                    "  <circle r=\"45\" cx=\"50\" cy=\"50\" fill=\"red\" />\n" +
                                    "</svg>"
val model = ImageRequest.Builder(LocalPlatformContext.current)
        .data(svgString.toByteArray())
        .decoderFactory { result, options, _ ->
            // if you only store and display SVG files, you can remove the if condition block, or add other formats.
            if (result.mimeType == "image/svg+xml") {
                SvgDecoder(
                    result.source,
                    options
                )
            } else {
                return@decoderFactory null
            }
        }
        .build()

val painter rememberAsyncImagePainter(
    model = model,
    placeholder = placeholder,
    // you can implement other callbacks here...
)

这里的替代解决方案是使用 SVG URL

val svgURL = "https://test.api/example.svg"
      val model = ImageRequest.Builder(LocalPlatformContext.current)
        .data(svgURL)
        .decoderFactory { result, options, _ ->
            if (result.mimeType == "image/svg+xml") {
                SvgDecoder(
                    result.source,
                    options
                )
            } else {
                return@decoderFactory null
            }
        }
//        .httpHeaders(
//            NetworkHeaders.Builder()
//                .apply {
//                    token?.let { add("Authorization", "Bearer $it") }
//                }
//                .build()
//        )
        .build()