ctrl+shift+p filters: :st2 :st3 :win :osx :linux
浏览

SVG 到 JSX

由 scitech 全部

将打开Sublime Text缓冲区中的原始SVG转换为有效的JSX

标签 svg, jsx, react

详细信息

安装

  • 总数 1K
  • Win 591
  • Mac 453
  • Linux 185
8月6日 8月5日 8月4日 8月3日 8月2日 8月1日 7月31日 7月30日 7月29日 7月28日 7月27日 7月26日 7月25日 7月24日 7月23日 7月22日 7月21日 7月20日 7月19日 7月18日 7月17日 7月16日 7月15日 7月14日 7月13日 7月12日 7月11日 7月10日 7月9日 7月8日 7月7日 7月6日 7月5日 7月4日 7月3日 7月2日 7月1日 6月30日 6月29日 6月28日 6月27日 6月26日 6月25日 6月24日 6月23日
Windows 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0
Mac 1 1 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Linux 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

README

源代码
raw.​githubusercontent.​com

将 SVG 转换为 JSX

此插件将SVG属性替换为它们的JSX有效等效项，并删除常见的JSX无效属性字符串。

何时使用此插件?

  • 如果您正在处理一个具有大量手动SVG处理的React项目。
  • 如果您厌倦了重复地在来自Sketch或Illustrator的SVG资产上进行查找+替换。

示例

假设您有一些从图形编辑器输出的SVG输出，您希望将其包括在一个React组件中。直接使用标记会引发错误

错误：语言“jsx”不受支持
function Box() {
  return (
    <svg width="115px" height="125px" viewBox="0 0 115 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect id="Rectangle" stroke="none" fill="#D8D8D8" fill-rule="evenodd" x="0" y="0" width="115" height="125"></rect>
    </svg>
  )
}

此插件可以通过右键菜单和主菜单访问，将删除无效属性并正确处理有效属性的缩写，这样您可以在组件的渲染方法中使用SVG而不会出现错误

错误：语言“jsx”不受支持
function Box() {
  return (
    <svg width="115px" height="125px" viewBox="0 0 115 125" version="1.1">
      <rect id="Rectangle" stroke="none" fill="#D8D8D8" fillRule="evenodd" x="0" y="0" width="115" height="125"></rect>
    </svg>
  )
}

对于需要动画的具有多个不同组件的复杂插图，这非常有用！

何时不使用此插件？