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 上设置大小

 1 export default function SvgIcon(props) {
 2     const { path = '', color = '#5B6FFF', size = 20 } = props
 3     if (!path) return
 4     const svg = `<?xml version="1.0" standalone="no"?
 5         <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 7         <svg t="1616385809871" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p->`
 8     const imgSrc = `data:image/svg+xml;base64,${Base64.encode(svg)}`
 9     return (
10         imgSrc && (
11             <Image style={{ width: size, height: size }} src={imgSrc} />
12         )
13     )
14 }