Atomic Design - separation of implementation components from Atomic UI components

Question

Beginning to build a new UI library using the atomic design methodology we quickly ran into a problem when trying to categorise the smallest UI building blocks as atoms. An example here might be a React component that might be say, <SVGComponent />. Initially classified as an atom - it quickly became apparent that it probably wasn't. In terms of atomic design it wouldn't fit the vocabulary of being an atom - it is an implementation detail. So an <Icon /> component might fit the design classification of atom and the implementation of that component might be composed of an <SVGComponent />. There are other examples of such components eg <Font/>.

Is there a common parlance for describing and classifying such components alongside an atomic ui library and where a dependency exists? Any thoughts generally on this?

Thanks

Answer 1

I'm not an expert in concepts of AD, but referring to the definition:

Atoms are the smallest possible components, such as buttons, titles, inputs or event color pallets, animations, and fonts. They can be applied on any context, globally or within other components and templates, besides having many states, such as this example of button: disabled, hover, different sizes, etc.

So, if I understood the purpose of <SVGComponent /> right, I don't quite agree that it doesn't fit the vocabulary of being an atom. Comparing it with the <Button /> component (which is an atom), it can freely receive props like 'width', 'height', 'viewBox', etc.

As for the <Icon /> component, it's not necessary to compose <SVGComponent /> inside of it. You could try to pass something like 'src' prop to Icon, which can be one of various types (img src, raw svg code, etc).

Just my two cents. Hope it helps.