Showing results for 
Show  only  | Search instead for 
Did you mean: 

Recommended way to import SVGs as Components

Dynatrace Helper
Dynatrace Helper

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?


Dynatrace Helper
Dynatrace Helper

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.

Featured Posts