svg-to-react
将SVG转换为React组件。
安装
deno install https://deno.land/x/svg2react/mod.ts
使用
cat xxxxx.svg | svg2react
会得到如下输出
import { SVGProps } from "react"
export function DiqyeSvg(props: SVGProps<SVGSVGElement>) {
return <svg viewBox="0 0 18 20" {...props}>
<defs>
<filter id="a" color-interpolationFilters="auto">
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.200000 0 0 0 0 0.200000 0 0 0 0 0.200000 0 0 0 1.000000 0"/>
</filter>
</defs>
<g fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round" filter="url(#a)" transform="translate(-16 -21)">
<g stroke="#292D32" strokeWidth="1.382">
<path d="M25 37.3c2.942 0 5.333-2.421 5.333-5.4v-4.5c0-2.979-2.39-5.4-5.333-5.4-2.942 0-5.333 2.421-5.333 5.4v4.5c0 2.979 2.39 5.4 5.333 5.4"/>
<path d="M17 30.1v1.8c0 4.473 3.582 8.1 8 8.1s8-3.627 8-8.1v-1.8m-10.569-3.168a7.029 7.029 0 0 1 4.89 0m-4.072 2.7a6.083 6.083 0 0 1 3.262 0" opacity=".5"/>
</g>
</g>
</svg>
}
主要解决的问题
- 去除冗余的标签和ID
- ID唯一化
- 转换为符合React SVG组件规范的的属性
- 格式化,Copy 友好