Common Icons

Overview

Enhancing user experience within applications heavily relies on the effective use of icons. For frontend JavaScript developers engaged in Buildfire's plugin ecosystem, the process of seamlessly integrating icons has been significantly streamlined through the introduction of common icons. This article delves into the concept of common icons, explains their role in simplifying development, and emphasizes their importance as a vital asset in your developer toolkit.

Common icons serve to eliminate the need for embedding specific icon packages into your plugin code. Instead, by leveraging Buildfire's pre-defined common icon names, developers can now benefit from a dynamic rendering system that seamlessly adapts based on the chosen icon package within the Control Panel.

Compatibility with Icon Packages

When a user selects an icon package through the Control Panel, the common icons you've integrated automatically render with the chosen package.

Usage

Consider a plugin under development that entails search, addition, and copying functionalities. To provide comprehensive support for diverse icon packages, the following are examples of common icons:

• bf-icon-search for search-related interactions.
• bf-icon-add to signify content or feature addition.
• bf-icon-copy to indicate actions related to copy.

The following sample images show search icon bf-icon-search in different icon packages, the first image shows the icon rendered as a bootstrap icon while the second shows as a glyph icon:

Implementing in HTML Tags

The following example shows how to implement common icons in HTML tags:

<span class="bf-icon bf-icon-search"></span>

List of Common Icons

Here's a comprehensive list of common icons along with their usage:

Icon Class Name	Icon Usage
bf-icon-search	Search-related interactions
bf-icon-add	Signify content or feature addition
bf-icon-arrow-up	Indicate upward direction
bf-icon-arrow-down	Indicate downward direction
bf-icon-arrow-left	Indicate leftward direction
bf-icon-arrow-right	Indicate rightward direction
bf-icon-calendar	Represent calendar or date-related
bf-icon-star-fill	Filled star icon
bf-icon-star	Hollow star icon
bf-icon-delete	Indicate deletion or removal
bf-icon-tag	Tag-related interactions
bf-icon-list	Represent a list or list-related
bf-icon-geo-alt	Alternative geo location icon
bf-icon-question-circle	Question or help-related icon
bf-icon-log-out	Signify user logout
bf-icon-log-in	Signify user login
bf-icon-mail	Represent email or mail-related
bf-icon-bell	Indicate notifications or alerts
bf-icon-option-vertical	Vertical options or settings
bf-icon-option-horizontal	Horizontal options or settings
bf-icon-funnel	Represent filtration or funneling
bf-icon-pencil-square	Square-pencil or edit-related
bf-icon-pencil	Pencil or edit-related
bf-icon-cross	Indicate cancellation or closure
bf-icon-link	Represent linking or connection
bf-icon-globe	Indicate global or world-related
bf-icon-phone	Represent phone or call-related
bf-icon-user	Represent user or user-related
bf-icon-home	Indicate home or main page
bf-icon-copy	Indicate copy or duplication