Icon Management
Last updated
Last updated
Icons are the visual shorthand of the digital world, encapsulating functions, features, and commands within simple, recognisable symbols. In the ComUnity Developer Toolkit, icon management and implementation is critical, our Icon Management feature is meticulously designed to provide developers with a comprehensive suite of icons and the tools to curate and utilise them within their applications. We have integrated a suite of universally recognised icon libraries, including Bootstrap Icons, Font Awesome 6, Devicon, and Material Design, as well as a specialised Weather Icons collection that offers a diverse array of weather-related symbols. We've ensured that the Toolkit remains backward-compatible by continuing to support Legacy icons from previous versions, facilitating seamless transitions for existing projects. This extensive range of readily accessible icons enables developers to significantly enhance the clarity and aesthetic appeal of their user interfaces.
Elevating the developer experience, the Toolkit extends the capability to upload custom icons. This autonomy in iconography affords developers the opportunity to infuse unique branding elements and tailor the user interface to specific design narratives.
Effective icon management is essential for creating intuitive and aesthetically pleasing applications in the ComUnity Developer Toolkit. This guide will walk you through finding, adding, and using icons, empowering you to leverage the visual language of icons in your projects.
Navigate the Toolkit's extensive selection of system icon libraries, including Bootstrap Icons, Font Awesome 6, Devicon, and Material Design, and the specialised Weather Icons set. Learn how to efficiently find the perfect icons for your application from these included collections.
To browse system and custom icon libraries in an existing project in the Toolkit, follow these steps:
Go to Project Settings > Icons
All system icon libraries will appear as tiles as shown in the screenshot below:
Click Details to view system icons in the corresponding library
Enrich the visual vocabulary of your applications by adding custom icons to the Toolkit. This section details the process for uploading and managing your custom icons within the Toolkit, ensuring they are optimised for performance and scalability.
To add a icon/icon library to an existing project in the Toolkit, follow these steps:
Users are responsible for ensuring that they have the correct licensing to use the icons they intend to upload.
Go to Project Settings > Icons.
All system icon libraries will appear as tiles, including the Add Icon tile view the Browse Icons section above.
Click the Add Icon tile to navigate to the Add a Custom Icon Library screen:
Click the Add SVG files button to upload your icon files from your local machine in the screen showed below:
When adding a custom icon library, you can upload individual SVG files or a ZIP file containing SVG files. The upload function will recursively search the ZIP file structure for all SVG files and ignore any files with duplicate names.
In the screen that appears, specify the following details for your icon or icon library:
Icon library name: Enter a name for your icon library.
Style: When incorporating a library, the default Style is set to regular. However, you have the flexibility to customise this. To select a different style, simply use the dropdown menu provided. If your needs extend beyond the available options and you wish to define a unique style, you can easily do so by entering a new name in the designated field.
Drag and drop SVG files: Drag and drop the SVG files for your icon or icon library from your local machine.
After adding your icon files, you can preview and categorise your icons.
Check the box next to I have an active license that gives me permission to use these icons.
Finally click the Add icon library button.
This section delves into the comprehensive management of custom icon libraries within the Toolkit. Developers can effortlessly add, categorise, and tag their own icon sets, ensuring effortless retrieval and organisation. Moreover, it provides the ability to preview icons to verify their alignment with design goals and enables downloading for seamless integration into applications. By harnessing these functionalities, developers can craft a unified and personalized visual language across their projects, ensuring that each icon not only fulfills a functional purpose but also harmoniously contributes to the overall aesthetic and user experience.
Effectively organising and tagging your icon sets is essential for effortless retrieval and seamless integration into your projects. This section provides comprehensive instructions on categorising and tagging your icons within the library, empowering you to enhance icon manageability and streamline your design workflow.
Go to Project Settings > Icons.
All system icon libraries will appear as tiles view the Browse Icons section above for more details.
To select a custom icon library, click the Details button located within the corresponding tile. This action will display all icons contained within that specific library on your screen.
Once you've located the desired icon, simply click on it to select it. The selected icon's properties will be displayed on the right-hand side of the screen for further customisation.
To tag an icon, click the (+) icon located next to the tag section.
Enter the desired tag name in the field that appears.
Confirm and save your tag by clicking the checkmark icon.
You can click the (x) mark to remove a tag
For categorisation, click the (+) icon adjacent to the category section.
Choose a suitable category from the provided dropdown menu.
Finalise your selection by clicking the checkmark icon to save the category.
You can click the (x) mark to remove a category.
By following these straightforward steps, you can efficiently categorise and tag your icons, significantly enhancing the organisation of your library. This process not only streamlines the retrieval of icons but also facilitates their implementation into various aspects of your project, promoting a more efficient and streamlined design workflow.
After selecting a Custom Icon Library and clicking the Details button, you will be presented with a comprehensive view of all icons contained within that specific library. This allows you to preview each icon in detail, ensuring it aligns with your design vision and project requirements. To preview an icon, simply click on it. The selected icon will be displayed in a larger format, providing a clear view of its details and ensuring it seamlessly integrates with your project's aesthetic and functionality.
Once you've identified the target icon for your project, you can effortlessly download it for immediate use. To download an icon, simply click the Download button located in the Preview. The selected icon will be downloaded in the appropriate format.
As your design needs evolve, you may find that your existing custom icon sets require additional icons to fully support your project's visual language. The Toolkit's intuitive interface makes it easy to seamlessly add new icons to your existing custom icon sets, ensuring that you have the right icons at your fingertips to bring your design vision to life.
To add icons to a custom icon set, follow these steps:
Navigate to Project Settings > Icons and locate the desired custom icon library.
Once you've identified the target library, click the Details button located within the corresponding tile. This action will display all icons contained within that specific library on your screen - icon gallery
Click the Manage tab located this action will display the Add a Custom Icon Library view, for instructions how to add icons view Adding a Custom Icon Library.
Icons serve as visual cues that empower users to effortlessly navigate and interact with various interface elements. Within the Toolkit, icons seamlessly integrate with a range of list components, elevating both aesthetic appeal and functional effectiveness. This guide delves into the process of implementing icons in diverse List implementations.
Implementing icons into your List is a straightforward process:
Locate the list or main menu Item where you wish to implement the icon.
Upon selection, an Icon setting option will appear in your Property Settings, granting access to the icon configuration tools.
Click on the (+) icon to reveal the icon editor, a dedicated space for selecting and customising your icons.
Choose the desired icon library. The Toolkit selects Bootstrap icons by default, if Bootstrap does not align with your requirements, explore alternative libraries provided within the Toolkit.
Browse the selected library and locate the icon that best suits your needs.
Once you've selected your icon, click Use Icon to apply your changes.
Finally click Save to persist your changes, the chosen icon will now be integrated into your list, enhancing the user interface.
