Generating styles/icons from AJAX content

[jd-solanki]

Hi,

I am really satisfied by using unocss and DX it provides. ❤️ Specifically icon preset 😍

One thing I wanted to know that, can I generate styles for AJAX content? i.e.

1. I get icons list via AJAX request and I want to let unocss know that I also have this icons now and I want to generate style for it
2. Another use case can be, if I fetch HTML via AJAX and render using let's say using v-html in vue then we do need to generate styles for that markup.

I guess @unocss/runtime can do this but it is experimental as per README. So, I wanted to know what is the correct approach to achieve this.

Thanks :)

Edit: I get icons list via AJAX

[chu121su12]

For no. 2, the runtime now has __unocss_runtime.extract(string) to prep the styles before rendering.

https://github.com/antfu/unocss/blob/a6785d9968c2961be05658481c504de229988294/packages/runtime/src/index.ts#L30-L35

[jd-solanki]

Hi @chu121su12

Thanks for responding. I updated the issue body a bit to clarify that I get icons list or class list in AJAX data, not icon styles.

How can I leverage the extract function in my code? Any example?

[chu121su12]

Something like this

axios(...)
.then(async (r) => {
  await __unocss_runtime.extract(
    JSON.stringify(r.data) // or r.data.viewTemplate
  );
  return r;
})
.then(...)

[chu121su12]

Icons should be ok too as long as they're available in preset.

[jd-solanki]

So I can't do this only using unocss, right?

Do I have to use unocss runtime as well?

[chu121su12]

You can add them to safelist to let the compiler pre generate the css. Otherwise, the engine won't be available then on the page, so rumtime is required on dynamic classes/tokens

[jd-solanki]

Thanks.

Before closing I wanted to ask, can I use runtime in production? Readme says it is experimental 🤔

[chu121su12]

See #121

[jd-solanki]

Hi @chu121su12

Sorry for the confusion. I was referring to unocss runtime instead of core unocss while asking for production.

[chu121su12]

What the runtime does is mainly exposing unocss core to the browser environment. So I’d say something similar to the linked issue.

[jd-solanki]

Thanks for the help :)

I will try it soon and will let you know if something goes wrong.

[jd-solanki]

Hi @chu121su12

I tried using unocss runtime with icon preset but I am unable to generate classes for dynamic content.

GitHub repo: https://github.com/jd-0001/vue-unocss

I am getting { "icon": "i-mdi-home" } as a response from a fake API (hosted online thanks to https://mocki.io/fake-json-api). Now, with below code I am unable to make it work:

fetch('https://mocki.io/v1/cc254402-ebd0-4878-b0a0-4fb4dac0ad09')
  .then(response => response.json())
  .then(data => {
    iconObj.value = data
    __unocss_runtime.extract(data.icon)
  });

possible issues:

• I don't know if I have to configure unocss runtime to let it know I have icon preset or I have unocss configured
• unocss runtime config is written in main.ts file and not in vite config

[chu121su12]

I'm unsure if icon can work on runtime. currently the preset is not part of any runtime presets.

[jd-solanki]

Thanks for your response. I will keep it open, no worries :)

[antfu]

https://github.com/unocss/unocss/tree/main/packages/preset-icons#browser

[jd-solanki]

I want to reopen this because I am unable to resolve the dynamic icon issue. Sorry but I am unable to understand what your link refers to.

I have created a reproduction repo: https://github.com/jd-solanki/unocss-dynamic-icons

Regards.

[jd-solanki]

Hi @chu121su12,

Sorry for ping but I think we should take a look at this as this issue isn't resolved yet.

[chu121su12]

I'm unsure if icon can work on runtime. currently the preset is not part of any runtime presets.

The interactive docs has presetIcons enabled by config on runtime. See its config; type some supported icons and watch the network console as the icons get downloaded.

You may have to build your own runtime for now. Follow examples as the other builds or this playground.

[jd-solanki]

Thanks for the info. I will give it a try and let you know.

Regards.

[jahnli]

@jd-solanki Have you solved it

[jd-solanki]

@jd-solanki Have you solved it

I haven't tried the above suggestions but I opened another issue #1359 which requests fallback mode and I guess it might solve this issue.

I have tried that as well 😆 beucase till then I was already moved to Iconify vue component. Using Iconify vue component (with vuetify) allowed me to use any locally installed icons + if someone write or fetch we fetch icon which is not present in installed collection (maybe someone wrote icons of some another collection) then iconify component fetches it from its API.

Isn't it cool 😍

I hope this is added in unocss with completion on mentioned feature request but I haven't tried UnoCSS fallback mode.

[muchenfine]

@jd-solanki How do you solve the icon data requested back from the network now? I hope you can help me and provide a demo

[jd-solanki]

@muchenfine You mean how I am getting data (which in turn renders icon) from network request if icon's collection isn't installed?

Do note that I am not using UnoCSS for icons now, I am doing this using Iconify component.

[muchenfine]

Ok, I wanted to use uno icon, but the data was requested back from the network, so it couldn't be rendered