Just one more...

Recent Conversation.

Hey here is a collection of over 20k icons for us to use, nearly every single open source pack you can find all in one

Oh wow this is amazing, what a great resource, we will use this from here on out

Two Days Later

While reviewing the new designs, I had a problem finding the icons you used? Which collection were they from in that pack we had discussed

Oh, we just need to get 1 more collection.

The great resource in mention is icones paired with unplugin-icons by the open sourcerer himself antfu

So. We need more. Okay.

Will admit, Iconsax has some great looking icons, so why not. Lets skim the readme on unplugin-icons for custom icon loading.

Find this

import { promises as fs } from 'fs'
// loader helpers
import { FileSystemIconLoader } from 'unplugin-icons/loaders'

Icons({
  customCollections: {
    // key as the collection name
    'my-icons': {
      account: '<svg><!-- ... --></svg>',
      // load your custom icon lazily
      settings: () => fs.readFile('./path/to/my-icon.svg', 'utf-8'),
      /* ... */
    },
    'my-other-icons': async (iconName) => {
      // your custom loader here. Do whatever you want.
      // for example, fetch from a remote server:
      return await fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text())
    },
    // a helper to load icons from the file system
    // files under `./assets/icons` with `.svg` extension will be loaded as it's file name
    // you can also provide a transform callback to change each icon (optional)
    'my-yet-other-icons': FileSystemIconLoader(
      './assets/icons',
      svg => svg.replace(/^<svg /, '<svg fill="currentColor" '),
    ),
  },
})

Which seems viable, lets keep going.

Here we are.

When using this plugin with your custom icons, consider using a cleanup process similar to that done by Iconify for any icons sets. All the tools you need are available in Iconify Tools.

You can check this repo, using unplugin-icons on a SvelteKit project: https://github.com/iconify/tools/tree/main/%40iconify-demo/unplugin-svelte.

Read Cleaning up icons article from Iconify for more details.

The article above has what we need. Lets start messing around see what is possible tonight.

Head over to iconsax and download their icon set as a zip of SVG's.

• Initial Icon Zip: 13.3MB
• Folder Size: 15.3MB
• All Icons Folder: 7.3MB

Open It up, find two folders, All, and Category. From using Icônes I know they have category support in some form, but that will be on our second pass. Lets see if this is even possible first.

So we are deleting the category folder, and are left with 7.3MB. Still far too large. Lets see what magic this icon cleanup toolset can do for us.

Will clone my vite electron project for now, as I am still getting used to rust and a rewrite of these in rust seems a bit past the scope of what I can justifiably do on the clock.

pnpm i @iconify/utils @iconify/tools

Throw the 'All' folder top level in the project, rename it to svg.

Grab the script from the article, paste it in main.ts switch the output file to top level test.json annnnnddddddd.

Type errors.

Lets add a few null checks here and there and we are off.

Run it again...

Ahh nice. Why use black, lets use shades of it. Soooo we add this in, which probably could be better but lets brute force to the solution then get eloquent.

if (colorStr === '#292D32') {
  return 'currentColor'
}

Boom. It runs. Lets check output file size.

523.1kB

Lots better.

But we dont have outline, twotone etc. Lots more to do.

Fire up GPRename and lets rename files manually for now, see what that gets me.

Run the folder through import again with subdirectories set to true, and we get a whopping 10.2mb json file. This seems wrong. Getting a bit burnt out for now, so will re attack it later tonight or tomorrow. Made More progress than I expected.

Worked on this a bit before bed, experimented on getting it loaded up into the project.

Before I get too lost trying to import the whole library, every variation etc, lets see if our current set of data works. The Icons needed were clock-1, user-tick, chart-1, and receipt-text. Will start with just extracting those out into their own json file. It looks like below.

So lets get to importing this. Referencing the example project and docs I did the following.

In vite.config.ts I added

Icons({
  customCollections: {
    isax: async () => {
      const content = await fs.readFile("public/isax.json", "utf8");
      return JSON.parse(content);
    },
  },
}),

In the test component now

import IsaxUserTick from "~icons/isax/user-tick-linear";

    <IsaxUserTick />
    <IsaxUserTick />
    <IsaxUserTick />

And voila, it works.

Issues encountered:

• Color Pallette: Need to see how they do it in mdi etc. Some icons have two tones and that kinda screws up the whole "currentColor" thing.
• Naming: Renaming was working out properly, but will need to make sure I stick to the Icones naming convention.