普通svg标签无法使用，但微信小程序特有的image标签却可以展示svg，只需要编码成base64即可微信小程序中没有btoa，需要自行安装[polyfill](https://zhida.zhihu.com/search?content_id=251119758\&content_type=Article\&match_order=1\&q=polyfill\&zhida_source=entity)或类似的字符串转base64的库 ```tsx import { Image, ImageProps } from "@tarojs/components"; const b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; const weBtoa = function (string: string) { string = String(string); var bitmap, a, b, c, result = "", i = 0, rest = string.length % 3; for (; i < string.length; ) { if ( (a = string.charCodeAt(i++)) > 255 || (b = string.charCodeAt(i++)) > 255 || (c = string.charCodeAt(i++)) > 255 ) throw new TypeError( "Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range." ); bitmap = (a << 16) | (b << 8) | c; result += b64.charAt((bitmap >> 18) & 63) + b64.charAt((bitmap >> 12) & 63) + b64.charAt((bitmap >> 6) & 63) + b64.charAt(bitmap & 63); } return rest ? result.slice(0, rest - 3) + "===".substring(rest) : result; }; const Svg = ({ children, ...props }: Omit) => { let htmlString = children as string; // 如果没有xmlns，自动加一个 if (htmlString && !htmlString.includes("xmlns")) { htmlString = htmlString.replace( /viewBox="(.*?)"/g, (match) => `${match} xmlns="http://www.w3.org/2000/svg" ` ); } return htmlString ? (

) : ( <> ); }; export default Svg; ``` 使用 Svg ```tsx export interface IconHomeProps { borderColor?: string; fillColor?: string; style?: React.CSSProperties; checked?: boolean; } const IconHome: FC = ({ style, }) => { return ( ); }; export default IconHome; ```