Extension development and importing SVG files

I noticed that in order to import an SVG file as a string in an extension, the SVG files need to be in the ./lib directory. Presumably this is so that webpack can find them.

I realize I can modify the script in package.json to copy these for me each time the extension builds. However, I was wondering if there is an already established “correct” way of doing this so that we don’t have copy them into ./lib.

Reference: Reusing JupyterLab UI — JupyterLab 3.0.16 documentation

You do not have to copy them manually. Without seeing your package structure it is difficult to know what is missing, but I would check if you include svg files in package.json “files” property:

1 Like

I am having the same issue. Including sag files in my package.json files property doesn’t solve the problem for me :cry:

I still get the error:

ModuleNotFoundError: Module not found: Error: Can't resolve './img/icon-add.svg' in '/my-path/project/lib'

Should it be ../img/icon-add.svg?

1 Like

I think they may need to be in the directory specified for SVG files in package.json. For example:

"files": [

Oh good catch! I used to put my icons in project/src/img/*.svg. The error is gone after I move the icons to project/style/img/*.svg and import svgs using ../style/img/icon-add.svg.

Thank you so much, @adpatter! :pray: