Extension development and importing SVG files

JupyterLab
1

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

2

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
3

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'
4

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

1 Like
5

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

"files": [
    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
    "style/icons/**/*.{svg}",
    "style/index.js"
  ],
3 Likes
6

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:

2 Likes