Best solution for uploading svg's/images while using shadow dom for a module in the project. | Community
Skip to main content
A
AdobeAEMsitesuser
November 2, 2023
Solved

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

  • November 2, 2023
  • 2 replies
  • 1660 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

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.

2 replies

ShaileshBassi
Community Advisor
ShaileshBassiCommunity Advisor
Community Advisor
November 3, 2023

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

 

 

    A
    AdobeAEMsites_user
    November 3, 2023

    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
      Community Advisor
      arunpatidarCommunity AdvisorAccepted solution
      Community Advisor
      November 5, 2023

      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
        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        November 6, 2023

        @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
        Terms & ConditionsAccessibility statement

        Loading footer...