Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

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

Avatar

Level 1

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?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.



Arun Patidar

View solution in original post

5 Replies

Avatar

Community Advisor

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

Shailesh_Bassi__1-1699009736726.png

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

 

 

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. 

Avatar

Correct answer by
Community Advisor

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.



Arun Patidar

Avatar

Administrator

@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.



Kautuk Sahni