antfu/vscode-iconify

feat: enable custom collections

JessicaSachs opened this issue · 5 comments

JessicaSachs commented

👋🏻 Hello! I (and Cypress) use your custom icons plugin via the Unplugin ecosystem. Thanks for all the great work! I'm interested in adding support for custom collections.

I'd be willing to implement it if you pointed me in the right direction.

antfu commented

I guess at this point, we might need to unify the behaviour and configurations in unplugin-icons, this extension, @unocss/preset-icons to have the same interface and ability to add custom icons. It could be a bit tricky since VS Code are using a different process as your local Node process (Vite). Meaning we need to find a way to share the config for Vite and the VS Code extension.

Here are two solutions that come to my mind,

  1. Introduce a new config file like icons.config.ts for plugins to load from, just like we have windi.config.ts or postcss.config.js etc.
  2. Make a general tool to load configs from various configure files, like we could load from standalone file, or even extract the plugin config from vite.config.ts or webpack.config.js.

The downside of solution one is that we probably end up with too many config files and for ppl who don't outsource their config, they can't benefit from the extension or other integrations. I am leaner to solution two, which I believe provides better DX and could also be useful if we are end with building a VS Code extension for UnoCSS and maybe for the future of Windi and others. The only thing is that we need to do a PoC of solution two to see if it's really feasible tho.

  • 🎉1
antfu commented

Ok I made it https://github.com/antfu/unconfig, and it's working. You can see an example usage here https://github.com/antfu/unplugin-icons/blob/main/examples/vite-vue3/getConfig.ts

It's currently using https://github.com/egoist/bundle-require which is based on esbuild, which I guess it's not compatible with VS Code extension env. We might need to switch to some pure JS solution like https://github.com/alangpierce/sucrase later.

  • 👀1
JessicaSachs commented

OK I understand the two approaches and the problem you're trying to solve by unifying the icon library configurations across the three tools we have. I'm trying to understand the last comment. I'll pull down and test out your example repo. I mostly don't understand if you expect the VSCode plugin to work (given your comment about esbuild/VSCode compat).

The other thing I don't understand is how getConfig is consumed and by whom. If you had instructions for how to test, that would be super helpful 💯. My main concern from reading your comment is that getConfig is almost like a resolved build config -- like node_modules/@vue/cli-service/webpack.config.js is. I doubt that's what's happening, but that's what the code in getConfig looks like it's doing.

antfu commented

In this extension, we could call

import { loadConfig } from 'unconfig'

const { config } = await loadConfig({ sources: [...] })

for (const c of config.customCollections) {
  // ...
}

I just made the UnoCSS extension using unconfig (it's now working on non-Node env)

itpropro commented

I am using some custom imported JSON icon sets to integrate font awesome pro with unocss/presetIcons like this:

    presetIcons({
      scale: 1.2,
      warn: true,
      collections: {
        'fa-solid': async () => JSON.parse(await fs.readFile('./icons/fa-solid.json', 'utf8')),
      }
    }),

It would be great, if the extension would also show these as actual icons instead of just the svg content on hover (which comes from unocss intellisense). Here is an example with a free icon from that set:
image

If it helps for testing, I can create a minimal reproduction repo with just a few icons in the JSON file @antfu.
If you already started implementing something similar @JessicaSachs, I would like to support :)