A new version of Iconify components for SolidJS has been published.
This fixes server side rendering and generation, so now components work as expected on server and in browser.
Docs: iconify.design/docs/usage/s...
Behavior is completely unexpected:
- hover opens when mouse enters, but doesn't close when mouse leaves, yet closes on click
- click 2, hover 4: both 2 and 4 are shown, then click 4 and both disappear
- click 1.1, hover 1.3: behavior is different than above because 1.1 closes
Very unintuitive
I bet its the browser testing in new version. Makes it so easy to test components
Anyone else got hit with massive wave of GitHub issues spam?
My repo just did, over 4000 issues of spam.
GitHub was fast to clean it up, only several issues remained for me to delete when I got home, but my poor mailbox is dealing with 4000+ email notifications...
In addition to pre-made SVG+CSS components for Vue, Svelte and React, now there are components for SolidJS!
Very easy to use. Almost 300k open source icons!
SVG+CSS minifies SVG by moving all props to CSS, way better than SVG sprites!
Docs: iconify.design/docs/usage/s...
New versions of Iconify Tools and Iconify for Tailwind have been published.
These are security updates for SVGO.
As far as I can see, chances of exploit are close to 0 (must use untrusted SVG) and it is harmless (it will just freeze or crash), it is still worth updating.
Information about Next.js in my reply is incorrect.
It works with Next.js, but not when using Webpack. I was using Webpack in tests, so it failed. It works correctly when using Turbopack.
Corrected information on website, though can't edit posts here. Thanks!
Doh.
Yes, unplugin thing. It only supports webpack, so demo uses webpack. Works well with turbopack! I got it all the way around.
I'm sorry. I'll fix that!
Thanks for patience explaining it and showing demo!
So... it is working only if enabling backwards compatibility?
Forgot one step: change in next.config.js "css: 'embed'" to "css: 'import'" for components to generate .css files. Then error appears.
I've tested it on my local Next installation, cannot get this to work.
Any idea what could be wrong?
Demo is from github.com/iconify/unpl... from "examples/next". (install from root dir, then build it, then check demo)
Didn't know about it. Thanks!
Important note: these components are for React, not Next.js
Turbopack used by Next.js does not allow importing .css files from components, which makes it needlessly complicated to add component with stylesheet.
If you are using Next.js, try Vinext instead. It is a fork of Next that uses Vite.
Iconify now offers pre-made SVG+CSS components for React.
Usage:
1. Install one of "@iconify-react/" packages
2. Import icon from that package.
SVG+CSS minifies SVG by moving all props to CSS, much better than SVG sprites!
Documentation: iconify.design/docs/usage/s...
I've added a SVG to SVG+CSS converter to my website: cyberalien.dev/svg-to-css/
It is a very basic tool, which creates CSS for SVG, reducing HTML size by a lot.
Be aware that SVG+CSS cannot be used in production yet, still waiting for Safari to support "d" attribute in CSS.
Iconify offers pre-made components for Vue and Svelte that render icons as SVG + CSS: "@iconify-vue/{prefix}" and "@iconify-svelte/{prefix}".
SVGs are small, better than SVG sprites!
Update for `line-md` icon set: it now uses CSS animations. That means HTML for animated icons is very small.
"Material Line Icons" now includes animated icons in multiple formats:
- SVG animations
- CSS animations
- SVGs for each frame at 120 fps
Repo: github.com/cyberalien/l...
Long article: cyberalien.dev/articles/gen...
Also a new icon set is coming soon, with around 5k animated icons so far.
Huge updates on the Stop Killing Games campaign and the EU Citizens' Initiative:
Current subscriber count: 999,007.
The quest to 1 million has been going slowly the past 2 years, but it looks like it'll finally happen!
Safari 26.3 is here... and it is yet another disappointing release.
Still no full support for `path()` in CSS.
Other browsers have supported this for years. Safari Technology Preview has supported this since 2024.
What does this mean? No animations for SVG paths with CSS yet because of 1 browser.
Nice!
Updated without any issues
In the latest version of Oxfmt (better prettier replacement):
• oxfmt --migrate prettier
• oxfmit --init
• oxfmt --stdin-filepath for pipe usage
• Node.js API
• Sort package.json fields by default
• Respect root .editorconfig
Give it a try:
• www.npmjs.com/package/oxfmt
...and still no support for `path()` function for `d` attribute in CSS.
It has been in Safari Technology Preview for way over a year, other browsers have supported it for several years, still not in Safari release. Disappointed.
Another Cloudflare outage?
I'm receiving cloudflare error "500 Internal Server Error" for many websites right now. Not as bad as outage few weeks ago, but still many websites are down.
With everything going on, zero-trust is the only security model that makes sense.
Everything is exploitable 💣 — accept it. All we can do is reduce the damage surface through separation and isolation.
Just noticed that Cloudflare has a new option (new to me, might have been there for a while) to block AI bots.
Enabled on all websites.
All open source data is available in git repos, no need for bots to crawl pages
Thanks for making it!
In last few months I've switched vast majority of my projects to tsdown.
In addition to yesterday's release of a new major version of Iconify Tools, several other Iconify packages have been updated:
- Iconify Utils
- Iconify plugin for Tailwind CSS
- Iconify API
Goal of all releases is reduction of number of dependencies.
Special thanks to @benmccann.com for helping!
Thanks a lot!