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.

[dheerajsinghnagdali]

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

It does have affect when using it with Storybook

[TryV]

What is the use case of configuring it?

It increases the readability of the code.

[GlitchedCode]

Please add this simple feature. Having a prefix would massively improve developer experience with auto imports without having to rename every single source file (which can frequently change). Customizing component templates is simple enough, but customizing exports and index templates requires more work from the user than it would be to add one switch to the command or config.