Recommended way to import SVGs as Components

[lucas_hocker]

What is the recommended way to bring SVGs into a Dynatrace App as a Component, so that it can be styled dynamically? React has several “standard”-ish ways through libraries: SVGR, react-svg, etc. Is there support already built into whichever loader the CLI uses under the hood?

[robaxelsen · Accepted solution]

Hi @lucas_hocker, and thanks for your question! Currently we have no built-in support.

Your options are to either use SVG or IMG element inline with JSX to render SVG, or inline with import of the SVG string. You can also further "componentize" your implementation to further abstract it in your code.

Alternatively, as you mentioned, you can use SVG react libraries (with or without webpack) as well, though we do not at this point have any recommended way.

EDIT: Using webpack alongside the CLI is not straight forward though. It would skip/duplicate the entire build step that within the CLI, as the CLI uses esbuild and not webpack.