Make auto generated SVG paths clearer

[michaeljaltamirano]

Our documentation about adding SVGs is confusing in part because the auto-generated SVG path (e.g. src/icons/emojis/svgs/AnxiousEmoji.tsx) is similar to the SVGs path we are adding the actual SVGs. (e.g. src/svgs/emojis/anxious-emoji.svg).

One way to make the manual/auto-generated steps more distinguished would be to give the auto-generated steps a more clearly identifiable name, e.g. outputting the SVG components to src/icons/emojis/autoGeneratedSvgComponents/AnxiousEmoji.tsx. This would help make the documentation better with clearer naming, and prevent potential confusion and user error about the steps in the future.

To do this we would just updating the naming paths in package.json script steps, and then do a global find and replace the import paths in the files in which we import the auto-generated SVG Components.

[zcaceres]

Could also prepend an underscore before the auto-gen directories. Basically anything that can signal to someone who's looking for patterns in the source code that there's something special about those directories.

[zcaceres]

@jashieh or @daigof cooldown project idea? 😁