Best solution for uploading svg's/images while using shadow dom for a module in the project.

[AdobeAEMsitesuser]

I have created my project using maven archetype and I currently have 2 frontend project modules and one of it has a shadow DOM so we've been facing issues with uploading svg's/png's to that project. Is it best to upload it in DAM or just create icons folder to upload the icons via code, create a resource path similar to js and css and then update the ResourcePath in webpack?

[ShaileshBassi]

Hi @AdobeAEMsitesuser Can you please share the relative url which you are using. Tried at my end and the relative urls in ui.frontend for the svg/png icons are working as expected.

PFB the way the relative url was used within the project for icons

Uploading to DAM is also possible but in that case you need to leverage the dialog or design dialog for taking the input as the author will get the ability to change the location and can even delete the icons intentionally or un-intentionally.

If you are going via this option, you need to ensure that the HTL code is adjusted accordionly if the icons are not selected by the author or the icon is selected by later removed.

Hope this helps!

Thanks,

Shailesh

[AdobeAEMsites_user]

I think the question was mostly about what is the best location to store icons for the frontend, is it DAM or a resource folder?

We are currently using static inline SVG icons in React, and their usage is growing day by day, which is increasing the build file size. Therefore, we are considering moving them to either the clientlib resource folder or to DAM. 

[arunpatidar · Accepted solution]

Hi @AdobeAEMsitesuser 
If Icons can be replaced and author by Content Author then DAM, if it is purely related to code then add those in the resources folder.

[AdobeAEMsites_user]

Thank you !

[kautuk_sahni]

@AdobeAEMsitesuser  Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.