Import custom icons


Hope you are having a great day! We have some custom icons in an app we are working on and I am hoping to import them as react components as you can do with create-react-app. It does not seem this works out of the box for the app platform though so looking for some guidance. In the @dhis2/ui repo it seems you are using the svgr. Would you recommend that I set this up for my project as well?

If this is the case then I need some advice, because instructions on setting up SVGR involve making changes to webpack and I am not sure how to do this for an app platform project!

Many thanks in advance!

What I have done for now is use the cli version of svgr to generate the icon components before running the app, then just using these.

I’d say try your best to find a way to import them without making changes to the WebPack configuration as I’m not sure it’s allowed for apps:@austin

1 Like

Do this mean that you are importing them as a library? :smiley:

I basically have my folder of svgs, then I use svgr from the command line to generate a folder of React components, one for each svg file, then I import these in the app.

1 Like

@plinnegan that’s a good approach - we do the same here - ui/icons at master · dhis2/ui · GitHub. We then build the library from the svgr output using @dhis2/cli-app-scripts

1 Like