ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

SVG to JSX

by scitech ST2/ST3

Converts raw SVG in an open Sublime buffer to valid JSX

Labels svg, jsx, react

Details

Installs

  • Total 605
  • Win 279
  • OS X 249
  • Linux 77
Jul 20 Jul 19 Jul 18 Jul 17 Jul 16 Jul 15 Jul 14 Jul 13 Jul 12 Jul 11 Jul 10 Jul 9 Jul 8 Jul 7 Jul 6 Jul 5 Jul 4 Jul 3 Jul 2 Jul 1 Jun 30 Jun 29 Jun 28 Jun 27 Jun 26 Jun 25 Jun 24 Jun 23 Jun 22 Jun 21 Jun 20 Jun 19 Jun 18 Jun 17 Jun 16 Jun 15 Jun 14 Jun 13 Jun 12 Jun 11 Jun 10 Jun 9 Jun 8 Jun 7 Jun 6
Windows 0 0 3 1 1 0 1 0 1 0 0 0 1 0 0 0 3 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 1 1 0 0 0 1 0 1 0 0 0 0 0
OS X 0 1 0 0 0 1 0 0 2 0 2 1 0 0 0 0 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 0 0 0 0 0 0 0 0 0 1 1
Linux 1 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 0 0 1 0 0 1 0 0 0 0 0 0 0 0 0 0 0

Readme

Source
raw.​githubusercontent.​com

Convert SVG to JSX

This plugin replaces SVG attributes with their JSX-valid equivalents and deletes common JSX-invalid attribute strings.

When is this useful?

  • If you're working on a React project with a lot of manual SVG manipulation.
  • If you're tired of repetitive find + replacing on the SVG assets pasted from Sketch or Illustrator.

Example

Say you have some SVG output from your graphics editor that you'd like to include in a React component. Using the markup directly will raise errors:

Error: language “jsx” is not supported
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>
  )
}

This plugin, accessible from the right-click menu and the main menu, will remove invalid properties and correct the casing of valid properties so you can use the SVG in a component's render method without errors:

Error: language “jsx” is not supported
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>
  )
}

For complex illustrations with several distinct components to be animated, this can be quite useful!

When is this not useful?