Icons shouldn't load from relative path

[wassgha]

I am getting this error icons.svg net::ERR_FILE_NOT_FOUND the problem is that my html file is not in the root of my project (it is inside an "app" folder) but xel is trying loding icons.svg from the relative path which results in "Desktop/MyProject/app/node_modules/xel/images/icons.svg net::ERR_FILE_NOT_FOUND" Can you please fix this? Should be an easy fix. Thank you!

[jarek-foksa]

This has to wait until I migrate the code from HTML import to ES6 modules, i.e. after Chrome 61 becomes stable.

[wassgha]

Any temporary fix?

[jarek-foksa]

The way how relative URLs are resolved by HTML, CSS and SVG is a total mess and HTML imports are adding even more complexity.

For now I would recommend you to organize your directory structure so that Xel can be imported with <link rel="import" href="node_modules/xel/xel.min.html"> (i.e. keep index.html in the same directory as node_modules and package.json).

[jarek-foksa]

BTW, if you are testing the app in a browser (instead of Electron or NW.js), you should make sure you are using a localhost server and ~/Desktop/MyProject/app/ is served as the root directory.

[wassgha]

Actually I am using Electron

[jarek-foksa]

I see. Unfortunately you will have to change the directory structure for now.

[un0btanium]

I used a very dirty workaround by copying the node_modules/xel folders into the folder with my .html files. This allows me to keep my file and folder structure for now.

[mdcoon]

There is a workaround to put an "iconset" attribute in every x-icon element pointing to the relative path of the icons.svg file. That gets really tedious really fast, so another workaround can be done in javascript.

The following is a workaround for Electron, but could apply to others I suppose.

For Electron, you can add the following to the main and renderer js files:

1) In your main.js, on BrowserWindow object, do this: spawnedWin.baseDir = __dirname; //sets the base install directory for electron app 2) In your renderer.js file, add this: const remote = require('electron').remote; const base = remote.getCurrentWindow().baseDir; 3) In renderer.js, in whatever function you call on window load, add this: document.querySelectorAll("x-icon").forEach(e=>{ e.setAttribute("iconset", base + "/node_modules/xel/images/icons.svg"); }) There is an iconset attribute that the xel javascript looks at to determine the path to the svg file. This just overrides it.

[alek117]

I find a solution for this problem, in xel.min.js use this (around line 7413):

if (this.hasAttribute("iconset") === false || this.getAttribute("iconset").trim() === "") { return "../../node_modules/xel/images/icons.svg"; }

Adding a jump to parent directory until you found the node_modules folder, you should suppose the xel.min.js file is in the same directory the index.html file

My directory structure is:

• node_modules/
• src/
  • rendered/ -index.html

[Infikus]

I am currently facing the same issue. My file structure is the same as alek117 and I use electron-webpack. I tried to add an iconset attribute but it does not work. Is there a way to fix this issue?

I also saw that there is no "images" folder in my node_modules/xel. Is that normal?

[jarek-foksa]

I also saw that there is no "images" folder in my node_modules/xel. Is that normal?

That is not normal, when you install Xel from NPM it should create node_modules/xel/images/icons.svg file.

[thevirajshelke]

I am facing the same issue. using the toolkit in electron and my index.html is not in the same folder as that of node_modules. Any workaround as of now? When can we expect a fix?

[jarek-foksa]

@thevirajshelke I'm afraid the current behavior won't be changed anytime soon as it works fine for me and I have a ton of more important tasks.

In the longer run I would like to embed all files from /images/ directory into xel.min.js so that Xel could be imported from any URL, including CDN domains.

[thevirajshelke]

@jarek-foksa No issues. I am pretty sure you must be busy making this toolkit more awesome. I really loved the toolkit so I wanted to use it for my electron app but unfortunately, my folder structure is different so ran into an issue. I have done a bit of R&D and came across a solution for this which is electron specific. I have created a new pull request, kindly check it and feel free to merge it :)

Looking forward to your reply! Thanks :)

And nice idea of embedding all files in the long run :) Waiting for more awesome stuff in Xel! All the best :+1:

[jarek-foksa]

@thevirajshelke Thanks for submitting the pull request, but I'm afraid this is not the right approach to solve the problem. Following code should not be allowed to execute in the renderer process of a properly sandboxed Electron app:

  const electron = require('electron');

I'm working right now on a proper fix, I will report my progress in several hours.

[thevirajshelke]

@jarek-foksa Okay sure take your time & let me know :)

One thing that I know is that for this to work properly nodeIntegration has to be set to true. I get it! So by properly sandboxed app you meant setting the nodeIntegration to false? I am just aksing so that I get to learn. Will be helpful for me because right now I am developing an electron app. I can use your tips. So whenever you free, lemme know about this.

Thanks a lot!

[jarek-foksa]

So by properly sandboxed app you meant setting the nodeIntegration to false?

Yes, by "properly sandboxed app" I meant an app that follows https://github.com/electron/electron/blob/master/docs/tutorial/security.md

[thevirajshelke]

Okay got it! Thanks a lot for this :) :+1:

[jarek-foksa]

This issue should be fixed in Xel version 0.0.196.

Please note that in Xel 1.0 I might reduce the default iconset (which is embedded into xel.min.js) to ~150 most commonly used icons (down from 964 icons currently). Users would be advised to use Boxy SVG or some other tool to generate a custom iconset that contains additional icons needed by given project.

[thevirajshelke]

@jarek-foksa Thanks a lot for solving this issue on such a high priority. I really appreciate your efforts :) All the very best :+1: