Skip to content

185658-Ej2-React-Appearance #469

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: hotfix/hotfix-v26.2.4
Choose a base branch
from
Open

185658-Ej2-React-Appearance #469

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
09b334a
185658-Ej2-React-Appearance
Faith-Atieno Jul 9, 2024
d701a22
Ci issue resolved
Faith-Atieno Jul 9, 2024
cb57764
Ci issue resolved
Faith-Atieno Jul 9, 2024
33062e6
Update icons.md
maheshtps Jul 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ej2-react/appearance/icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---

# React Icons Library
# React Icons Library Appearance component
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not following our syntax and need to get content review.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not a component, only Icons set for all built in themes. so, need to correct this topic.


Syncfusion's icon library is a collection of pre-designed icons that can be used to enhance the user interface of an application. This pre-designed icons are set of `base64` formatted font icons. Utilizing this icon library can make it simpler to create a cohesive, visually pleasing design for an application.

Expand Down Expand Up @@ -71,7 +71,7 @@ cd my-app
npm start
```

For an introduction and configuration of the common specifications, see [getting started with the Syncfusion React application](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start/).
For an introduction and configuration of the common specifications, see [getting started with the Syncfusion React application](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start).

### Using icons directly in HTML element

Expand Down Expand Up @@ -119,7 +119,7 @@ The following steps explain the direct rendering of the Syncfusion icon in the H

### Icon size

The `ej2-icons` package offers options to display icons in different size modes. A user can use different icon sizes in their application based on touch or mouse mode. If the user is using touch mode, add `e-large` class to the element to make the icon easily interactable, or add the `e-small` or `e-medium` class in mouse mode.
The `ej2-icons` package offers options to display icons in different size modes. A user can use different icon sizes in their application based on touch or mouse mode. If the user is using touch mode, add `e-large` class to the element to make more accessible for touch interactions, or add the `e-small` or `e-medium` class in mouse mode.

The pre-defined icon size is present in the available classes listed below.
* `e-small` - Sets the icon size as `8px`.
Expand Down Expand Up @@ -152,7 +152,7 @@ The pre-defined icon size is present in the available classes listed below.

The Syncfusion React icons can be customized with custom color and size by overriding the `e-icons` class. Customizing the icons in the library can be useful for making the icons more visually appealing and fitting to the design of the application. For example, a user can change the color of an icon to match the color scheme of their application, or increase the size of an icon to make it more visible on smaller screens. It may also be useful for creating a consistent look and feel across different parts of the application. Overall, customizing the icons in the library can improve the overall user experience of the application.

In the example below, the icon colour is customized with custom color.
In the example below, the icon color is customized with custom color.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand Down