Add horizontal spacing between the icon and text in the custom icon list #2352

[Ashleeey1224]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Resolves #2352
This PR resolves issue #2352 by adding i-spacing attribute for modifying horizontal spacing between the icon and text in the custom icon list.

• This feature enhancement is based on SPWwj's implementation of CustomListIconProcessor.ts.
• Refer issues: Add horizontal spacing between the icon and text in the custom icon list #2352, Add Icon and Media Support to List - Resolves #906 and #2272 #2316.

Overview of changes:

1. By defining "{i-spacing="xem"}" attribute, user can customise the horizontal distance between icon and text. x means numbers.

• CODE:

* **Item 1**: i-spacing is 0.15em {icon="glyphicon-education" i-width="70px" i-spacing="0.15em"}
* **Item 2**: i-spacing is 0.55em{i-width="70px" i-spacing="0.55em"}
* Item 2.1: no i-spacing attribute, default is 0.35em {icon="fas-question-circle"}
* Item 2.2:
* Item 2.3: overwrite i-spacing attribute by 2em {i-spacing="2em"}
* **Item 3**{i-width="70px"}
* Item 3.1: {icon="glyphicon-book" i-width="70px"}
* Item 3.2: {icon="/images/AzurLane_roma copy.png" i-size="10px" i-class="rounded"}

• OUTPUT:

Anything you'd like to highlight/discuss:

Once a i-spacing attribute is assigned to an icon, it will continue apply to icons at the same level (e.g., Item2.3, Item3.1, Item3.2), until it is overridden by a different i-spacing attribute (e.g., from Item 2.1 to Item 2.3).

Testing instructions:

1. Confirm that you have the correct branch for this pull request checked out on your local environment.
2. Establish a new MarkBind project using the markbind init command.
3. Experiment with the list using the provided syntax from above.

Proposed commit message: (wrap lines at 72 characters)
Add i-spacing attribute to custom icon list

• Providing an option to adjust spacing between the icon and text for enhanced user experience.

• Add "i-spacing" attribute to ICON_ATTRIBUTES and interface IconAttributes

• Implement logic to check whether the user has defined the i-spacing attribute or not.

• Update createIconSpan function to incorporate i-spacing attribute.

• Update getIconAttributes function to retrieve i-spacing attribute.

• Changes maintains code consistency and cleanliness.

• Refer issues: Add horizontal spacing between the icon and text in the custom icon list #2352, Add Icon and Media Support to List - Resolves #906 and #2272 #2316.

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

---

[Ashleeey1224]

feel free to leave some feedback:) happy to review and improve it

[codecov]

Codecov Report

Attention: Patch coverage is 33.33333% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 48.90%. Comparing base (1c01cfb) to head (624d093).

Files	Patch %	Lines
packages/core/src/html/CustomListIconProcessor.ts	33.33%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2375      +/-   ##
==========================================
- Coverage   48.92%   48.90%   -0.02%     
==========================================
  Files         124      124              
  Lines        5245     5247       +2     
  Branches     1110     1112       +2     
==========================================
  Hits         2566     2566              
- Misses       2371     2373       +2     
  Partials      308      308              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[tlylt]

Hi @Ashleeey1224, sorry for the late response. Please wait for the discussion in the original issue to conclude before making further changes.

[tlylt]

I will close this for now as a conclusion is not yet reached in the original issue. Please feel free to re-open after the investigation/discussion is completed.

[EltonGohJH]

Overall LGTM.
I think just 1 small nit and also the potential repositioning of a part of the docs!

[tlylt]

@yucheng11122017 is this PR still linked to #2352? Need to update the description to target it properly.

[kaixin-hc]

lgtm

[yucheng11122017]

@all-contributors please add @Ashleeey1224 for code

[allcontributors]

@yucheng11122017

I've put up a pull request to add @Ashleeey1224! 🎉