How to use the icon's raw svg as url(data:....) in css?
demiro opened this issue · 5 comments
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
- Follow our Code of Conduct
- Read the Contributing Guide.
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
I couldn't find anywhere on the site, how to use it in the css...
just how to setup your own css classes
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.
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
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.