Welcome to the comprehensive guide on how to integrate and use the RDS Icons in your Vue.js projects. In this post, we'll walk you through the steps to get started with RDS-icons, from installation to usage, ensuring a smooth integration process.

Introduction to RDS-Icon

RDS-icons is a powerful and flexible icons design system built with Vue.js, aimed at providing a consistent and efficient way to develop user interfaces. With a collection of reusable components and styles, RDS-icons helps streamline your development process, ensuring your applications have a cohesive look and feel.

RDS Icons are packaged up and published to npm. We only include the processed SVGs in this package-it's up to you and your team to implement. Read our docs for usage instructions.

The iconography we use in RDS simplifies user interaction with the system, as it allows elements to be more easily identified. Furthermore, it allows users to more easily understand the layout components, reducing the learning curve on the interface.

The Journey of RDS-Icon

The journey of @aherrahul/rds-icons started as a side project focused on providing developers with a flexible icon solution. By 2023, it grew into a comprehensive package, expanding to support the icon needs of modern web applications.

In 2022, I began experimenting with custom icon libraries after noticing the limitations and frustrations of using traditional icon fonts. Icon fonts, while popular, were restrictive and limited to the icons included in the set. Using multiple icon fonts increased load times, and customization options were often inadequate. This sparked the idea of @aherrahul/rds-icons, aiming to overcome these challenges.

Purpose of @aherrahul/rds-icons

The purpose of @aherrahul/rds-icons is to provide developers with a vast selection of customizable icons while minimizing vendor lock-in. This package allows you to:

  1. Choose from an extensive library of icons across different styles.
  2. Integrate custom icons with ease, ensuring your designs remain unique.
  3. Use open-source tools and icon data that empower you to customize icons without being tied to a specific set or vendor.

Prerequisites

Before you begin, make sure you have the following installed:

  • Node.js (v12 or higher)
  • npm (v6 or higher) or Yarn (v1.22 or higher)
  • Vue.js (v2.x or v3.x)

Recommendations

  • To better represent system icons, we recommend using icons with a size between 20 x 20 and 24 x 24 pixels.
  • For better understanding by the user, use icons already commonly adopted for the desired function. For example, a bell for notifications, a gear for settings, etc.
  • To make content clearer, use icons in conjunction with text whenever possible.

NPM Package

@aherrahul/rds-icons

Step 1: Install RDS-Icon

To use RDS in your Vue.js project, you first need to install it via npm. Open your terminal and run the following command:

npm install @aherrahul/rds-icons

Alternatively, if you prefer using Yarn, you can run:

yarn add @aherrahul/rds-icons

Step 2: Import RDS-Icon in Your Project

Once the installation is complete, you need to import RDS into your Vue.js project. This can be done in your main JavaScript file (usually main.js or main.ts).


import { completeIconSet } from '@aherrahul/rds-icons/dist';

Step 3: Using RDS-Icons

RDS implements a component-shaped wrapper for RDSIcons icons . Any maintenance or improvements must be made to the respective project and design kit in Figma and, if necessary, updated here.


<rds-icon
    name="box-outline"
    height="40"
    width="40"
    color="#36424E"
></rds-icon>

Contributing

To contribute to RDS Icons, follow these steps:

  • Starting from RDS's Design Kit, export the new icons with the plugin with the preset RDS Icons.
  • Extract the zip generated by the plugin in the svg-icons RDS Icons directory.
  • In RDS Icons package.json, update the lib version.
  • Delete the RDS Icons dist folder, if it exists locally.
  • Run the command npm run build:library to build the package.
  • Publish to NPM with npm publish.

Note: to use the new icons in RDS, simply update the RDS Icons version in RDS's package.json and add the names of the new icons to the file iconsData.js.

The Future of @aherrahul/rds-icons

Moving forward, I plan to enhance the package with additional icon sets, improved framework support, and better customization tools. This growth will be driven by community feedback and support. Contributions from users are welcomed, as they play an essential role in refining and expanding the library.

Open Source Commitment

@aherrahul/rds-icons is fully open-source, inviting developers to contribute and improve the project. This approach fosters collaboration and helps ensure the package meets the needs of the community.

Support and Contact

If you're using @aherrahul/rds-icons, your feedback is always appreciated! Consider joining the community, offering suggestions, or contributing to the codebase. Every bit of support helps in expanding and enhancing the package, ultimately benefiting developers everywhere.

Conclusion

Integrating RDS into your Vue.js project is a straightforward process that can greatly enhance your development workflow. With its reusable components and consistent design language, RDS helps you build polished and professional applications efficiently. Demo project/Starter-pack

We hope this guide helps you get started with RDS. If you have any questions or feedback, feel free to leave a comment below or reach out to us on GitHub.

Thank you for choosing @aherrahul/rds-icons for your icon needs. I look forward to seeing how you use it in your projects!

Happy coding!


Thank you so much for reading. If you found it valuable, consider subscribing for more such content every week. If you have any questions or suggestions, please email me your comments or feel free to improve it.