Always prefix component name with `Svg`

[gregberge]

As discussed in #168, the component name generated could be a problem with some filename. For an example, "infinity.js" will generate "Infinity" that is a reserved keyword.

The simplest solution is to prefix all component name with Svg. We already do it for "number" filenames.

[smashercosmo]

I think, that prefix should be configurable. With possibility to opt-out completely.

[gregberge]

What is the use case of configuring it?

[smashercosmo]

Yeah, maybe configuring is an overhead) But opting-out would be nice. In my project all svgs already have 'Icon' prefix.

[gregberge]

The name doesn't have any impact expect in React inspector 🤷‍♂️

[smashercosmo]

Ok, you're right) Withdrawing my request)

[PenguinDetective]

Took me some time to understand the why, even with the linked issues, so here are some more details:

JavaScript is a forgiving language, allowing you to overwrite global objects, properties and methods.

E.g., a component can be named Math or Infinity

import Math from "./Math";

function App() {
  console.log(Math.random());
  return (
    <div>
      <Math />
    </div>
  );
}

However, this would break above component, which uses at the same time Math.random(). JavaScript sees Math not as the built-in math function but as a JSX element.

I.e. - having a prefix is required to prevent conflicts.