@ic-on/main

v0.0.4

Published

8 months ago

the future of iconing

0High
0Medium
0Low

websource008

icons

`<ic-on>`

icon speaks louder than text

⚡️ Why?

✅ 1. Universally Compatible

ic-on is built with Web Components (Custom Elements), making it natively compatible with any framework: React, Angular, Vue, or even plain HTML.

🔥 2. Lightning-Fast Integration

Unlike traditional icon libraries that force you into an endless loop of downloading and unzipping their assets just for starting a simple project, ic-on is installed once and for all: globally.
Once installed, you can use it in any project across your system without ever having to reinstall.

🌐 3. Vast Icon Collection

Get access to over 19,700 icons from popular open-source projects, including:

🛠️ 4. Iconify – Custom Icons Made Easy

Iconify makes ic-on the world's first extensible icon library by allowing you to add your own icons to our ecosystem.
Simply capture the icon of your liking (via a screen snip) and run:

ic-onify <image>

This processes the image, removes its background, and saves it to the global icons registry- making it a reusable component in our library accessible anywhere just like any other ic-on.

💡 5. Efficient Compilation

Shipping an entire icon library for every project is wasteful if you only use a few icons.
The ic-on extract command scans your project and extracts only the icons you actually use into a local folder, drastically reducing your app's size and saving valuable space.

🚀 Getting Started

⚙️ Installation

To install ic-on, just run the following command:

npm i -g @ic-on/main --foreground-scripts

Tip: The --foreground-scripts flag ensures that any necessary post-install scripts run immediately.

🔥 Quick Integration

To integrate ic-on into your website, add the following script to your <head>:

<script src="http://localhost:3411"></script>

Then, insert icons using the <ic-on> element:

<ic-on i="1k"></ic-on>

To explore and get a list of available icons, open your browser and navigate to: http://localhost:3411/client/search.html. Here you can query all the icons in your system through a user friendly search interface.

⚙️ Framework Integration

Since ic-on is built from Web Components, it works in any framework out-of-the-box:

💻 React

ic-on react

This generates an ic-on.tsx file that:

Declares the necessary JSX typings to prevent TypeScript errors.
Ensures that <ic-on> is recognized as a valid element in your React project.

Note: Do not delete src/ic-on.tsx- it is required for React compatibility.

⚡️ Vue, Angular, and Other Frameworks

Include the same script in your index.html:

<script src="http://localhost:3411"></script>

Use <ic-on> as a standard HTML element.
You might encounter slight errors, in some frameworks like Angular, as their compilers may not recognize as a valid element. However, these issues can be easily resolved with minimal workarounds.

Note: We will soon release framework-specific guides in our forums to help you with seamless integration. Stay tuned!

🛠️ Commands

Once installed, ic-on provides several commands to streamline your workflow:

🔥 1. `ic-on extract`

Purpose: Downloads all icons used in your project into a local folder.
Usage:
- Run ic-on extract and visit all relevant pages of your site.
- The icons you use will be saved in the build folder.
Benefit: Ships only the icons you actually use, reducing your project's size.

🎯 2. `ic-onify <image>`

Purpose: Adds custom icons to your library.
Usage:
- Provide the image file as an argument.
- The command processes the image by removing its background and adds it to the icon registry.
Benefit: Easily extend your icon library with custom icons.

📚 In-Depth Overview

ic-on is more than just an icon library- it's a flexible and efficient system designed for developers. Here's a deeper look at how it works:

⚙️ 1. Native Browser Integration

Built as a Custom Element, <ic-on> requires no additional libraries or frameworks.
This enables effortless integration with virtually any front-end technology.

🚀 2. Dynamic Icon Loading

To prevent repeated reinstallation, <ic-on> spins up a local server (on port 3411 using ic-on serve) to host the icon registry system-wide.
The server automatically starts with your OS (configurable) for a seamless developer experience.
It intelligently resolves the best icon file format (SVG, WebP, PNG, or JPEG) and serves the most appropriate asset.

🎨 3. Efficient Rendering

Instead of inserting an image, <ic-on> applies the icon as a CSS mask (-webkit-mask), allowing it to inherit text colors and adapt to your design system effortlessly.
This ensures that icons remain crisp and consistent with your styling rules.

🔗 4. Global Installation & Reusability

Once installed, ic-on becomes a globally accessible resource across all your projects.
This minimizes redundancy and ensures a consistent icon experience everywhere.

🚀 Final Thoughts

ic-on is designed with both developers and end-users in mind. It offers:

Universal compatibility via Web Components.
Rapid integration with a single script inclusion.
Efficiency by only loading necessary icons.
Extensibility with ic-onify, allowing you to grow your icon library with custom icons.
Automatic server startup via ic-on serve, ensuring your local icon server is always running.

Whether you're working with React, Angular, Vue, or plain HTML, ic-on delivers a powerful, streamlined icon experience with minimal configuration.
Let your icons speak louder than words with ic-on! 🚀