How to correctly include a custom icon in an extension?

JupyterLab
1

When I try to import an svg icon as described here: https://github.com/jupyterlab/jupyterlab/blob/05a2fa047c5416ae1dd6a6cdac165c13a3513f47/packages/ui-components/README.md#how-to-create-a-new-labicon-from-an-external-svg-file

And, when I execute jlpm run build, I get an error:

ModuleNotFoundError: Module not found: Error: Can't resolve './icons/record_on.svg' in '/home/null/workspace/educational-technology-collective/etc_jupyterlab_authoring/lib'

./icons/record_on.svg is located in the root directory of the extension.

If I add ./icons/record_on.svg to /home/null/workspace/educational-technology-collective/etc_jupyterlab_authoring/lib it builds.

However, I am guessing that there is a better way to include icons in the project. Does anyone have any guidance on this?

2

In my case the problem was that I didn’t specify the correct path to the icon files. The path to the icon file is relative to the directory it is being imported from (obvious?). Hence, if the icons are in an icons directory in the root of the extension, then the import should look like this:

import icon from "../icons/icon.svg";

I had gotten reliant on TypeScript to tell me whenever I messed up an import; hence, the question. It doesn’t do it in this case due to the type declaration.

Reference: jupyterlab/README.md at 05a2fa047c5416ae1dd6a6cdac165c13a3513f47 · jupyterlab/jupyterlab · GitHub

Examples: Add notebook tours, icons by bollwyvl · Pull Request #29 · jupyterlab-contrib/jupyterlab-tour · GitHub