分享一个更好的svg转tsx组件工具

当我需要将svg转换到tsx组件进行使用时，我使用了svgr，但实际使用中的体验并不是很完美，如果我不自己计算好要传入的组件高度和宽度，组件在使用时就会失去原有的比例，看着非常的奇怪。所以我开发了svgtts，来满足我的需求

零依赖，代码量小，执行效率高是svgtts相较于其他软件最大的优点

svgtts通过正则表达式的方式，自动匹配到svg文件中height和width的值，算出height和width的比例

在最后得到的tsx组件中，你只需要在调用时传入height的值，就可以在保持原比例的基础上自定义图标的大小

// 转换前的svg
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
  <path d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
</svg>

// 转换后的tsx组件
export default function Add_circle({ height, fillColor = '#e8eaed' }: { height: number, fillColor?: string }) {
  const heightPx = height.toString() + 'px'
  const widthPx = (height * 1).toString() + 'px'
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" height={heightPx} width={widthPx} fill={fillColor}><path d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
  )
}

并且我们可以看到，通过svgtts转换得到的组件，也是支持自定义填充颜色的，这个参数在调用时可选，如果不传递这个参数，则会自动使用svg原有的填充颜色

 使用方法

# 转换单个文件
npx svgtts [path/to/svg] [(可选) 指定输出文件]

# 批量转换 若不指定输出文件夹，自动创建并存放在output内
npx svgtts [path/to/svgs/] [(可选) 指定输出文件夹]

项目地址

github 如果觉得对你有帮助请帮我点亮star支持一下，谢谢！