BUG: refs cannot be applied because of stateless functions.

[3rd-Eden]

Problem:

You can use ref's with stateless functions. This means that non of the svgs components can have a ref assigned to them.

Solution:

Change all stateless functions to class's.

[dennishansen]

Or a solution is to use forwardRef.

[3rd-Eden]

Yes/No/Maybe

The reason why I don't like that approach is the additional wrapping that you have per component. When you're rending a forwardRef your render tree will actually be:

<ForwardedRef>
  <Svg>
    <ForwardedRef>
      <G>
        <ForwardedRef>
          <Square />
        <ForwardedRef>
      </G>
    </ForwardedRef>
  </Svg>
</ForwardedRef>

vs

<Svg>
  <G>
    <Square />
  </G>
</Svg>

This might not seem like a big problem, which is true for when you have a single element you're working with. With an SVG asset it's not uncommon to have a deeply nested structure of paths, groups, and other shapes and when you need to debug one of those elements this is going to add up. In addition to that, it's more painful to write tests against due to this additional wrapping.