refactor: add options for setIconForNode function

src/internal-plugins/bookmark.ts

@@ -71,7 +71,7 @@ export default class BookmarkInternalPlugin extends InternalPluginInjector {
     const defaultMargin = iconNode.style.margin;
     const iconColor =
       this.plugin.getIconColor(filePath) ?? this.plugin.getSettings().iconColor;
-    dom.setIconForNode(this.plugin, iconName, iconNode, iconColor);
+    dom.setIconForNode(this.plugin, iconName, iconNode, { color: iconColor });
     // Reset the margin to the default value to prevent overlapping with the text.
     iconNode.style.margin = defaultMargin;
   }

src/lib/api.ts

@@ -50,7 +50,7 @@ export function getApi(plugin: IconizePlugin): IconizeAPI {
     getIconByName: (iconNameWithPrefix: string) =>
       icon.getIconByName(iconNameWithPrefix),
     setIconForNode: (iconName: string, node: HTMLElement, color?: string) =>
-      dom.setIconForNode(plugin, iconName, node, color),
+      dom.setIconForNode(plugin, iconName, node, { color }),
     saveIconToIconPack: (iconNameWithPrefix) =>
       saveIconToIconPack(plugin, iconNameWithPrefix),
     removeIconFromIconPack: (iconNameWithPrefix) =>

src/lib/icon-tabs.test.ts

@@ -94,7 +94,7 @@ describe('add', () => {
       plugin,
       'IbTest',
       iconContainer,
-      'purple',
+      { color: 'purple' },
     );
   });
 
@@ -108,7 +108,7 @@ describe('add', () => {
       plugin,
       'IbTest',
       iconContainer,
-      'blue',
+      { color: 'blue' },
     );
   });
 
@@ -117,13 +117,10 @@ describe('add', () => {
     await iconTabs.add(plugin, file, iconContainer);
     expect(iconContainer.style.margin).toBe('');
     expect(setIconForNode).toBeCalledTimes(1);
-    expect(setIconForNode).toBeCalledWith(
-      plugin,
-      'test',
-      iconContainer,
-      'purple',
-      false,
-    );
+    expect(setIconForNode).toBeCalledWith(plugin, 'test', iconContainer, {
+      color: 'purple',
+      shouldApplyAllStyles: false,
+    });
   });
 
   it('should not call `dom.setIconForNode` when icon is not found in data', async () => {
@@ -156,12 +153,9 @@ describe('add', () => {
     await iconTabs.add(plugin, file, iconContainer);
     expect(iconContainer.style.margin).toBe('');
     expect(setIconForNode).toBeCalledTimes(1);
-    expect(setIconForNode).toBeCalledWith(
-      plugin,
-      'IbTest',
-      iconContainer,
-      undefined,
-    );
+    expect(setIconForNode).toBeCalledWith(plugin, 'IbTest', iconContainer, {
+      color: undefined,
+    });
 
     getSortedRules.mockRestore();
     isApplicable.mockRestore();

src/lib/icon-tabs.ts

@@ -59,7 +59,9 @@ const add = async (
 
   // Only add the icon name manually when it is defined in the options.
   if (options?.iconName) {
-    dom.setIconForNode(plugin, options.iconName, iconContainer, iconColor);
+    dom.setIconForNode(plugin, options.iconName, iconContainer, {
+      color: iconColor,
+    });
     // TODO: Refactor to include option to `insertIconToNode` function.
     iconContainer.style.margin = null;
     return;
@@ -69,7 +71,9 @@ const add = async (
   for (const rule of customRule.getSortedRules(plugin)) {
     const isApplicable = await customRule.isApplicable(plugin, rule, file);
     if (isApplicable) {
-      dom.setIconForNode(plugin, rule.icon, iconContainer, rule.color);
+      dom.setIconForNode(plugin, rule.icon, iconContainer, {
+        color: rule.color,
+      });
       // TODO: Refactor to include option to `insertIconToNode` function.
       iconContainer.style.margin = null;
       break;
@@ -98,7 +102,10 @@ const add = async (
     iconName = value;
   }
 
-  dom.setIconForNode(plugin, iconName, iconContainer, iconColor, false);
+  dom.setIconForNode(plugin, iconName, iconContainer, {
+    color: iconColor,
+    shouldApplyAllStyles: false,
+  });
   // TODO: Refactor to include option to `insertIconToNode` function.
   iconContainer.style.margin = null;
 };

src/lib/icon.ts

@@ -235,7 +235,9 @@ const addAll = (
             IconCache.getInstance().set(dataPath, {
               iconNameWithPrefix: iconName,
             });
-            dom.setIconForNode(plugin, iconName, iconNode, iconColor);
+            dom.setIconForNode(plugin, iconName, iconNode, {
+              color: iconColor,
+            });
 
             titleEl.insertBefore(iconNode, titleInnerEl);
           }

src/lib/util/dom.test.ts

@@ -114,7 +114,7 @@ describe('setIconForNode', () => {
       .spyOn(svg, 'colorize')
       .mockImplementationOnce((icon) => icon);
 
-    dom.setIconForNode(plugin, 'IbTest', node, 'purple');
+    dom.setIconForNode(plugin, 'IbTest', node, { color: 'purple' });
 
     expect(colorize).toBeCalledTimes(2); // 2 times because of `applyAll` and `colorize`.
     colorize.mockRestore();
@@ -150,6 +150,19 @@ describe('setIconForNode', () => {
     parse.mockRestore();
     applyAll.mockRestore();
   });
+
+  it('should set `shouldApplyAllStyles` to `true` by default', () => {
+    const applyAll = vi
+      .spyOn(style, 'applyAll')
+      .mockImplementationOnce(() => '');
+
+    const node = document.createElement('div');
+    dom.setIconForNode(plugin, 'IbTest', node, { color: 'blue' });
+    expect(applyAll).toBeCalledTimes(1);
+
+    dom.setIconForNode(plugin, 'IbTest', node);
+    expect(applyAll).toBeCalledTimes(2);
+  });
 });
 
 describe('createIconNode', () => {

src/lib/util/dom.ts

@@ -43,21 +43,28 @@ const removeIconInPath = (path: string, options?: RemoveOptions): void => {
   removeIconInNode(node);
 };
 
+interface SetIconForNodeOptions {
+  color?: string;
+  shouldApplyAllStyles?: boolean;
+}
+
 /**
  * Sets an icon or emoji for an HTMLElement based on the specified icon name and color.
  * The function manipulates the specified node inline.
  * @param plugin Instance of the IconizePlugin.
  * @param iconName Name of the icon or emoji to add.
  * @param node HTMLElement to which the icon or emoji will be added.
- * @param color Optional color of the icon to add.
+ * @param options Options for adjusting settings while the icon is being set.
  */
 const setIconForNode = (
   plugin: IconizePlugin,
   iconName: string,
   node: HTMLElement,
-  color?: string,
-  applyAllStyles: boolean = true, // TODO: Needs some refactor.
+  options?: SetIconForNodeOptions,
 ): void => {
+  options ??= {};
+  options.shouldApplyAllStyles ??= true;
+
   // Gets the possible icon based on the icon name.
   const iconNextIdentifier = nextIdentifier(iconName);
   const possibleIcon = getSvgFromLoadedIcon(
@@ -67,18 +74,18 @@ const setIconForNode = (
 
   if (possibleIcon) {
     // The icon is possibly not an emoji.
-    let iconContent = applyAllStyles
+    let iconContent = options?.shouldApplyAllStyles
       ? style.applyAll(plugin, possibleIcon, node)
       : possibleIcon;
-    if (color) {
-      node.style.color = color;
-      iconContent = svg.colorize(iconContent, color);
+    if (options?.color) {
+      node.style.color = options.color;
+      iconContent = svg.colorize(iconContent, options.color);
     }
     node.innerHTML = iconContent;
   } else {
     const parsedEmoji =
       emoji.parseEmoji(plugin.getSettings().emojiStyle, iconName) ?? iconName;
-    node.innerHTML = applyAllStyles
+    node.innerHTML = options?.shouldApplyAllStyles
       ? style.applyAll(plugin, parsedEmoji, node)
       : parsedEmoji;
   }
@@ -134,14 +141,14 @@ const createIconNode = (
   let iconNode: HTMLDivElement = node.querySelector('.iconize-icon');
   // If the icon is already set in the path, we do not need to create a new div element.
   if (iconNode) {
-    setIconForNode(plugin, iconName, iconNode, options?.color);
+    setIconForNode(plugin, iconName, iconNode, { color: options?.color });
   } else {
     // Creates a new icon node and inserts it to the DOM.
     iconNode = document.createElement('div');
     iconNode.setAttribute(config.ICON_ATTRIBUTE_NAME, iconName);
     iconNode.classList.add('iconize-icon');
 
-    setIconForNode(plugin, iconName, iconNode, options?.color);
+    setIconForNode(plugin, iconName, iconNode, { color: options?.color });
 
     node.insertBefore(iconNode, titleNode);
   }