Recommended way to import SVGs as Components

lucas_hocker — Thu, 20 Apr 2023 07:50:59 GMT

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?

Re: Recommended way to import SVGs as Components

robaxelsen — Thu, 09 Feb 2023 09:35:01 GMT

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.

topic Recommended way to import SVGs as Components in Developer Q&A Forum

Recommended way to import SVGs as Components

Re: Recommended way to import SVGs as Components