How to use the icon's raw svg as url(data:....) in css?

[demiro]

Clear and concise description of the problem

So many times I have a list item that has several icons... and there are several items in the list... maybe 500+

I don't want the svg content to be displayed in all...

what I want is something like

<li><span class="icon-check" /> <b>{{title}}</b> <span class="icon-calendar" /> <button><span class="icon-settings" /></button></li>

in stead of all raw SVG code for each item

how can I achieve this?

how can I setup the scss for that list items, to set the span.icon-check to have

.icon-check{
  &:before{
    content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2 .....')
  }
}

Suggested solution

don't know

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[userquin]

https://unocss.dev/presets/icons

[demiro]

https://unocss.dev/presets/icons

I couldn't find anywhere on the site, how to use it in the css... just how to setup your own css classes

[userquin]

You can try using ?raw and then you need to encode it: https://github.com/unplugin/unplugin-icons/pull/90

About UnoCSS icons, you can switch to use icons via css classes, no more components needed.

[demiro]

You can try using ?raw and then you need to encode it: #90

About UnoCSS icons, you can switch to use icons via css classes, no more components needed.

I don't want to be using it as css class.... but in my css class I want to add a background or content property... check my example...

how can I use the ?raw in my css? I can easily to import and use the svg inside of my <script> but don't know how to go about it in the <style lang="scss"> block

[antfu]

This is out-of-scope. Unplugin Icons is about components and there is no plan to support CSS in this project. Thanks for bringing this up.