Vjacheslav Trushkin

Full stack open source dev from Estonia, author of Iconify.

[Vjacheslav Trushkin @cyberalien_dev]

@zeddotdev Thanks!

I know you'll fix them because last time I tried Zed maybe a month or two ago, I've noticed few more bugs that are now fixed.

Very good progress! Thanks for creating a really good editor!

[Vjacheslav Trushkin @cyberalien_dev]

Spent last 2 full days coding in Zed... and I'm not planning to go back to VSCode.

Zed is very impressive!

There are minor annoyances and quirks, mostly related to syntax highlight and code autocomplete, but it is significantly faster and works perfectly in large monorepos.

[Vjacheslav Trushkin @cyberalien_dev]

Added support for Astro to Iconify Unplugin: https://t.co/L39dCpGjDS

However, it is not recommended because icons are generated by splitting SVG to SVG + CSS, which is not supported by Safari.

Use islands with Vue, Svelte or React components instead, which have Safari fallback.

[Vjacheslav Trushkin @cyberalien_dev]

I'm experiencing a huge issue with VSCode for last 2 days: import suggestions no longer work in any project.

Nothing new installed recently. Disabled all extensions, VSCode is still broken.

Anyone experiencing the same issue?

[Vjacheslav Trushkin @cyberalien_dev]

New feature on Iconify icon sets website: select multiple icons, generate bundles in various formats.

It can export multiple icons as bundles, SVG and CSS sprites, components for several frameworks, raw data.

You can load and save selected icons.

Website: https://t.co/U7L9agMfhb

Demo:

[Vjacheslav Trushkin @cyberalien_dev]

About a week ago I got rid of infinite scroll for icons on Iconify website.

Didn't realise how bad it affected SEO until I looked at search performance emails.

Last month: 192k impressions, 4.43k clicks
2 years ago: 2.07m impressions, 106k clicks.

Infinite scroll was such a bad idea!

After implementing it I did see a drop in stats, so did everything I could to fix it, but it was just unfixable. Then gave up and decided to rewrite it later when I'll have free time. Took way too long to do it. Website basically dropped off the search index.

Good news is, just a week after releasing new website search index is very quickly improving: number of indexed pages, impressions and clicks are all going up very fast.

Don't make the same mistake. Don't implement fancy features that might break SEO. Good old pagination is much better.

[Vjacheslav Trushkin @cyberalien_dev]

New Iconify icon sets website no longer has infinite scrolling for icons.

However, now it has more settings for icons list:
- Layout: large icons with names, medium or small without names.
- Size of icons.
- Number of icons per page.
- viewBox outline.

https://t.co/U7L9agMfhb

Demo:

[Vjacheslav Trushkin @cyberalien_dev]

I've rebuilt Iconify icon sets website. Same UI, new UX! Check it out at https://t.co/U7L9agMfhb

Changes:
- Got rid of infinite scroll
- No more overlapping elements
- New code generator
- Select multiple icons, generate bundles and sprites

I'll write articles about each major change later... update is huge and will take a while to write tutorials for all new features.

It is a full rewrite, but with same UI framework so it looks similar to old website.

[Evan You @evanyou]

No server components in Vue was intentional

[Vjacheslav Trushkin @cyberalien_dev]

Fun fact: NPM has limit on how many packages you can publish consequently!

Ran a script to update packages for over 200 icon sets for 4 frameworks (adding new feature that required rebuilding all packages), so 800+ packages.

NPM started timing out after about 500 packages. Had to wait for about an hour before I could publish again.

[Vjacheslav Trushkin @cyberalien_dev]

There are many excellent icons with multiple colors, but hardcoded palette makes them hard to use.

Now, when using Iconify icon packages, you can customise colors, opacity and stroke-width of icons using CSS variables!

See documentation: https://t.co/zGgGm1WRaM

This applies to the following pre-made icon set packages:
- @ iconify-vue/* packages for Vue
- @ iconify-svelte/* packages for Svelte
- @ iconify-react/* packages for React
- @ iconify-solid/* packages for SolidJS

[Vjacheslav Trushkin @cyberalien_dev]

A while ago I've implemented infinite scroll for icons list on Iconify icon sets website.

That was a huge mistake.

UX got a lot worse.

I tried fixing it, but it is unfixable. So I'm reverting back to good old pagination.

Long article with details: https://t.co/ud0xYbBrBT

[Vjacheslav Trushkin @cyberalien_dev]

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: https://t.co/3d2ixOYGDw

[Ryan Carniato @RyanCarniato]

Breaking SolidJS 2.0 Beta https://t.co/1Jmbbw6BhY

[Vjacheslav Trushkin @cyberalien_dev]

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: https://t.co/TRQ7ojQglb

Components work with latest SolidJS and should work with upcoming SolidJS 2.0.

[Ryan Carniato @RyanCarniato]

Solid 2.0 is so powerful even I don't know the limits of its capability. Join me Friday when I try to break it:

https://t.co/LvBML2K4h1

[Vjacheslav Trushkin @cyberalien_dev]

@MichaelThiessen Why are you trying to keep up? Just ignore it, use whatever works.

[Vjacheslav Trushkin @cyberalien_dev]

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.

[Vjacheslav Trushkin @cyberalien_dev]

Information about Next.js above 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.

[Vjacheslav Trushkin @cyberalien_dev]

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: https://t.co/bZvO5eqDnh

Icons work in all browsers, including Safari.

Important: these components are for React, not Next. See documentation. If you are using Next, consider migrating to Vinext.