taro 已知 svg path，绘制

本文地址：https://www.cnblogs.com/veinyin/articles/14631591.html

 

1. 按照 svg 文件内容，将 path 拼接进去，如果要定义颜色，可以把 fill 设置为需要的颜色

2. 上述字符串通过 js-base64 编码为 base64

3. 使用 taro 的 Image，src 设置为刚刚得到的 base64 串，在 image 上设置大小

export default function SvgIcon(props) {
    const { path = '', color = '#5B6FFF', size = 20 } = props
    if (!path) return
    const svg = `<?xml version="1.0" standalone="no"?
        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
        <svg t="1616385809871" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9443" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
               <defs><style type="text/css"></style></defs>
  
               <path d="${path}" p-id="9444" fill="${color}"></path>
           </svg>`
    const imgSrc = `data:image/svg+xml;base64,${Base64.encode(svg)}`
    return (
        imgSrc && (
            <Image style={{ width: size, height: size }} src={imgSrc} />
        )
    )
}