Feature: generate static css icon

[husayt]

Sometimes especially when working with non vue components one needs to have icons defined at css level e.g.

.my-icon-stats {
    background: transparent        url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgc3Ryb2tlPSIjN0Y4QzhEIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMC41IDZWNC41aC01di41MzJhMSAxIDAgMCAwIC4zNi43NjhsMS43MTggMS40MzJhMSAxIDAgMCAxIDAgMS41MzZMNS44NiAxMC4yYTEgMSAwIDAgMC0uMzYuNzY4di41MzJoNVYxMCIvPjxyZWN0IHg9IjEuNSIgeT0iMS41IiB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHJ4PSIyIi8+PC9nPjwvc3ZnPg==)
        no-repeat center;
    background-size: 16px 16px;
    height: 16px;
    opacity: 0.87;
    width: 16px;
    max-width: 16px;
    display: inline-block;
}

then it can be used as <span class="my-icon-stats"></span> even without Vue or other framework. This will not be useful for every framework combination but will also allow for this library to be used with no framework as well.

I guess this might be possible with unplugin-icons on demand via special command or syntax, especially since most of the svg extraction is done.

[antfu]

Would you expect this as a dedicated mode or do you want to use this solution as a complement of the component solution?

I guess we could have something like

import "~icons/mdi/alarm.css"

to generate the corresponding CSS for each component.

Don't have the bandwidth right now but PR welcome.

[husayt]

Yes, that would be a nice framework agnostic way to use that. I guess this could be independent/complementing mode to the component mode.

[userquin]

Yes, that would be a nice framework agnostic way to use that. I guess this could be independent/complementing mode to the component mode.

I'll take a look

[userquin]

@husayt Here is the result (you can see the branch an the new css options, you will also be able to add default styles to all css icons):

On vite we have free HMR on dev:

[userquin]

And here the code:

[userquin]

@husayt you can also use custom loader (from svg files for example) to display it as css icon instead svg/component.

[husayt]

@userquin excellent stuff. Thanks

[userquin]

@husayt closing this since it has been included on unocss, if you want still this behavior open a new one issue.

[Akryum]

Maybe it can be useful for vitepress (which doesn't use uno nor tailwind by default)?

[luna-lee]

how can i add defaultClass or otherClass

[luna-lee]

Now I can only add css attributes, but I need to add a class to each icon