Using lottie/lordicons within Quarto HTML document

[jmgirard]

I want to embed a lord icon within my Quart HTML file (a revealjs presentation specifically). You're supposed to be able to paste the following code into an HTML file and have it work, but it doesn't work for me.

---
format: revealjs
---

<script src="https://cdn.lordicon.com/xdjxvujz.js"></script>
<lord-icon
    src="https://cdn.lordicon.com/lupuorrc.json"
    trigger="hover"
    style="width:250px;height:250px">
</lord-icon>

https://lordicon.com/icons/wired/outline/1103-confetti

Do I need to use the include-in-header setting (or something similar) to include the js from CDN?

[jjallaire]

You might consider implementing this as an extension (https://quarto.org/docs/extensions/). Note that we already have a fontawesome extension (https://github.com/quarto-ext/fontawesome) that you could study as an example.

In terms of including raw html yes you might want to use include-in-header. Also, raw HTML within a document is typically best enclosed in a raw HTML block like this:

```{=html}
<script src="https://cdn.lordicon.com/xdjxvujz.js"></script>
<lord-icon
    src="https://cdn.lordicon.com/lupuorrc.json"
    trigger="hover"
    style="width:250px;height:250px">
</lord-icon>
```

[jmgirard]

I have started working on this in jmgirard/lordicon. I think I get the required format of the repo and the lua syntax. I'm just a little confused about the dependencies.

https://github.com/jmgirard/lordicon/blob/7c695a61faf3159bc3432540d5dae97268157a78/_extensions/lordicon/lordicon.lua#L5

Can I just put the CDN link in the scripts field?

[jjallaire]

I'd suggest embedding it so that users don't require an internet connection. If you do want to just do the script tag to the CDN I'd just include it raw using the head field.

@dragonstyle Do scripts that are URLs automatically pass through or do they need to be files? Probably worth handling URLs as people won't always want to embed. @jmgirard In R Markdown we heavily promoted embedding for long-term reproducibility (many CDN links die after a few years and in any case can't ever be accessed when offline)

[jmgirard]

I'm having trouble with the "static" CDN anyway. I'd like to try to use the "bundle" approach:
https://lordicon.com/help/32-web-lordicon-custom-element

My challenge is that this is using NPM to get the JS bundles. Can I download the bundles and just include them in my extension? I'm not that familiar with NPM (or JS for that matter).

[dragonstyle]

Scripts should just pass through... I'm afk right now to confirm 100% but that is what I'd expect for sure...

[jjallaire]

I don't know enough about how lordicon is deployed to say for sure.

[jmgirard]

Ok, I got it to work (mostly). v0.0.1 allows embedding icons from their HTML code. But I am working on getting it to customize icons via lua and embed icons from downloaded JSON source files as well, which would enable offline use. The fontawesome extension was helpful, thanks for pointing to that.

One thing that was strange is that my icons appear in the web browser but not in the RStudio Viewer. Any idea why that might be?

For example, see https://jmgirard.github.io/lordicon/example.html and the screenshot below of the same file in RStudio:

[jjallaire]

Looks fantastic!!! The problem in RStudio appears to be a JS error coming from bundle.js. It's a syntax error, so likely a result of RStudio running an older version of Chromium that doesn't support whatever syntax or JS features you are generating in the bundle. Webpack should enable you to easily target older versions of JS though so you should be able to workaround this.

Note that if you right click on the Viewer pane in RStudio you'll get an "Inspect Element" menu that will get you into Chrome dev tools (and you can see the JS error in the console).

[jmgirard]

Hmm. I used babel to transcode the JS to ES2015+ (preset-env) but I'm still getting that syntax error in RStudio only. Any other ideas? jmgirard/lordicon#1

[jjallaire]

You might want to not minify so you can see the actual code that is causing the syntax error.

[jmgirard]

Ok, thanks. I did this but wasn't able to debug from that alone. I put a question up on RStudio Community:
https://community.rstudio.com/t/javascript-error-in-rstudio-viewer-but-not-chrome-or-firefox/142472