New Icon Architecture for ADS v2

[mohamedMok]

Hello ADS Community,

We're excited to share some updates about the upcoming changes in the icon architecture for ADS v2. As our platform continues to grow, we're constantly looking for ways to improve and streamline our development processes. With that in mind, we're planning to introduce a new architecture for handling icons in the next version of ADS.

Background

Previously, our architecture consisted of a single repository and npm package (@mozaic-ds/icons) that served icons in multiple formats including SVG, JS, PDF, as well as frameworks like React, Svelte, and Vue. While this was comprehensive, it also led to a bulky package and complexity in maintenance and updates.

Introducing New Architecture

With ADS v2, we're transitioning to a more streamlined and scalable architecture:

• Primary Package: ads-icons will be the core package, serving only SVG and JS formats. This change focuses on delivering the essentials, ensuring faster performance and easier versioning.
• Framework-Specific Libraries: Building on the ads-icons core, we will have dedicated libraries for different frameworks: ads-icons-vue, ads-icons-react, ads-icons-svelte. Each of these will cater specifically to their respective ecosystems, offering seamless integration and optimized builds.
• TypeScript Support: Recognizing the importance of type safety and developer experience, all new repositories will fully support TypeScript.
• Dedicated Builds: Each library will have its dedicated build process, ensuring that the packages are as lean and efficient as possible, and tailored to the needs of each framework.

Motivations for the Change

This architectural shift is driven by several key motivations:

• Modularity: By separating framework-specific libraries, developers can integrate only what they need, keeping their projects lightweight.
• Performance: By separating concerns, each package can be optimized for its specific use-case, leading to better performance.
• Community Contribution: Simplified and focused repositories lower the barrier for contributions, especially for those looking to contribute to specific frameworks.
• Flexibility: Developers can now choose only what they need, reducing bundle size and improving load times for their projects.

Simplified Icon Naming

In addition to the architectural changes, we've also taken a significant step towards making our icons more accessible and easier to use. We have revamped the naming convention of most icons in the library. This change is designed to ensure that:

• Intuitive Usage: The names are more descriptive and intuitive, making it easier for developers to find and integrate the icons they need without constant reference to the documentation.

• Consistency: We've standardized the naming across all formats and libraries, ensuring a consistent developer experience no matter what technology you're using.

• Future-proof: The new naming convention is designed with scalability in mind, allowing for easy introduction of new icons and categories as ADS continues to grow.

Adjusting Icon Sizes for Better Clarity

In our pursuit to refine the ADS icon library further, we have made a strategic decision regarding icon sizes. Recognizing the importance of clarity and readability, especially in complex UIs, we have decided to adjust our icon size offerings. Specifically, we have phased out the smaller 16px icons in favor of introducing a new standard 20px size.

Seeking Your Feedback

We believe these changes will significantly benefit the ADS community, but your input is invaluable to us. We'd love to hear your thoughts on the new architecture:

• Do you see any immediate benefits or drawbacks?
• Are there specific features or support you'd like to see in the new structure?
• How can we make this transition as smooth as possible for existing users?

Your feedback is crucial in helping us shape the future of ADS icons, ensuring that we continue to meet the needs of our diverse and vibrant community. Please share your thoughts, concerns, or any suggestions you might have.

Looking forward to your feedback and contributions!

Best,
The ADS Team

[mohamedMok]

The link to the new repository

• ADS-Icons: https://github.com/adeo/ads-icons
• ADS-Icons-Vue: https://github.com/adeo/ads-icons-vue
• ADS-Icons-React: https://github.com/adeo/ads-icons-react
• ADS-Icons-Svelte: coming soon 👾