Hey, I would love to contribute!

[iconify]

Hey, I would love to contribute!

[antfu]

• Utilizing PurpeCSS to search for the icons that users used in their code. Just like what Tailwind did.

I made the idea live: https://github.com/antfu/purge-icons. I think the final result is pretty neat, hope you find it interested :). And thanks for making Iconify so well organized, that helped me a lot. Thanks!

[cyberalien]

Thank you!

There is no public repo for website. Current website is a 1.5 year old monster that is basically unmaintainable and I do plan to redo it all. Current website is based around SVG framework, it wasn't made to be flexible and documentation is pretty much useless.

Since it was made, Iconify has expanded a lot. Now there are also components for several frameworks, plug-ins for design tools and close to completion Icon Finder that can be used to integrate Iconify in anything that can use an icon picker (WordPress theme builders, website builders and so on), most code has been rewritten in TypeScript.

For last few months I've been working on fixing website. Framework for new documentation is somewhat usable, I think it can be made public next week. Then I'd love help with documenting everything. Documentation is written in MarkDown with a bit of custom syntax sprinkled on top of it. It would be awesome if you could go through it, check if it makes sense, find errors, give any suggestions.

[cyberalien]

Very impressive!

There are few things that might help you:

• Iconify JSON Tools: https://github.com/iconify/json-tools.js it loads and parses JSON files, so you can easily extract data using getIconData() function and pass it to Iconify for Vue component to render icon.
• Iconify for Vue: https://www.npmjs.com/package/@iconify/vue to render icons.

Tools package is fully documented, so full documentation should be available next week. Vue component has pretty much all documentation in readme.

[antfu]

Oh btw, do you accept any donation?

[cyberalien]

So documentation that I said would be ready last week is still not ready. Unfortunately due to various things I didn't have time to work on it last week. Hopefully I'll publish it this week.

edit: published it at https://docs.iconify.design

It is hosted at Github Pages, repository is available here: https://github.com/iconify/documentation

Documentation is far from complete, but it already contains much more information than old documentation.

[antfu]

Glad to hear that! Then I would love to build an icon lookup/browsing site ground up on my own. Do you have any APIs to access the metadata of icon sets? I will share with you when I have some progress. If you like my ideas/design, I would be happy to help migrating docs and ship them to this org.

I love the idea of having access to a large range of icons with one-stop-shop solution that Iconify offers. And I would truly hope to see it project grows. Great job and thanks for making this :)

[cyberalien]

Its available in Icon Finder: https://github.com/iconify/icon-finder

All packages are based on "core" package. That package does search, parses data and presents them as objects that then can be displayed by various UI implementations.

If you want to see actual API queries, check packages/core/src/views/*.ts files. Those are views for various pages: collections list, collection view, search results. All of them have function _startLoading where you can see API end point and parameters.

[antfu]

Thanks!

[antfu]

I made the quick MVP: http://iconify-explorer.netlify.app/

The site is statical and searching is done locally. The biggest benefit of this is that I can now get search results almost instantly. It's extremely helpful when I try to find some icons quickly by trying similar keywords. (account/person/people/user for example).

Global search is in a hidden route for now: https://iconify-explorer.netlify.app/collection/all

There are still a lot of things to be improved. Just can't wait to share it with you and wondering what you think!

Thanks :)

[antfu]

After working with the explorer some more time, I came up with the ideas:

• What if users could select the icons they need (or the entire iconset) and then pack them with a single js file - with the same html usages, but icons shipped with js file.
• We can have a lite/lean build of iconify.min.js for users to choose that disabled the api requests or localStroage.
• Even more, we could build a toolchain. Utilizing PurpeCSS to search for the icons that users used in their code. Just like what Tailwind did.

My current usage is like:

<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="./loadIcons.js"></script>

// loadIcons.js
SimpleSVG._loaderCallback({
  prefix: "mdi-light",
  height: 32,
  width: 32,
  icons: {
    add: { body: '/* Shipped with the svgs manually */' }
  }
});

With the example above, I could use the icons with instantly without any api requests. My first idea is to generate this file and maybe concat with iconify.min.js if the user wants.

Don't know if you already have the idea or even implemented 😅. But I am very excited about it as I think this will be very useful for me to build some lightweight websites. XD

[cyberalien]

Build without API is available: https://code.iconify.design/1/1.0.7/iconify.without-api.min.js and https://code.iconify.design/2/2.0.0-beta.3/iconify.without-api.min.js

Single icons are available as separate NPM packages, which can be bundled. Iconify has 2 functions for that: addIcon (for adding one icon) and addCollection (for adding icon set).

Also Iconify JSON Tools package can be used to build bundles. I've added few examples to new documentation, here is Node.js version (also available as PHP for PHP users):

// Load collection
let collection = new Collection();
if (!collection.loadIconifyCollection('mdi')) {
	throw new Error('Cannot load Material Design Icons');
}

// Create bundle
let code = collection.scriptify({
	icons: ['account', 'account-alert', 'home', 'book-open'],
	pretty: false,
	optimize: true,
});

// Save bundle
fs.writeFileSync('bundle-mdi.js', code, 'utf8');

Toolchain for finding used icons: very good idea, however I don't know how to implement it.

Your current usage: swap _loaderCallback with addCollection. It is almost the same function, except that _loaderCallback also caches icons in storage. Bundle without API support doesn't have _loaderCallback because it is an internal callback meant for JSONP API requests. Version 2 doesn't have that at all because it uses fetch API.

[antfu]

Thanks a lot for the info! That's really helpful. I can look into the toolchain when I got some time. Please let me know if there is anything I can help with :)

[cyberalien]

Yes, I'd very much appreciate that. Development and maintaining project requires massive amount of time, servers that run API (currently 7 servers in different parts of the world to make sure visitors have lowest possible latency from anywhere when retrieving icon data) do cost money, so I do welcome any donations.

Current plan is to get some investors that would be interested in financing project, but before that project needs to be fully functional: new SVG framework and components, Icon Finder, documentation, new website. There have been some interest from few companies, but all of them want to see finished product, which will take time to complete. Even then I suspect it will take a while to get things up and running. Until then I'm financing it from my savings.

If you'd like to donate anything, my PayPal is [email protected]. Thank you very much for support!

[cyberalien]

Very impressive!

[antfu]

One more thing https://github.com/antfu/vscode-iconify, try it out if you happened to use VS Code :P

[cyberalien]

I am using VS Code and did install your plugin. This is awesome. When writing documentation I see icons :)

One thing I've noticed: when hovering an icon, big icon will appear for a second in bottom window there terminal is, then will disappear. I suspect it is supposed to stay open. Might be a bug.

[antfu]

Yeah, it's a bug and I am trying to fix it. Glad for it being helpful :)

[antfu]

Closing this for now. Let me know if there is anything I can help with :)

[cyberalien]

You've made some really cool stuff with Iconify that many users already use. That is a huge contribution. Thank you!