switcherIcon not working as expected

[jees47]

I want to implenent switcher icon with fontawesome icons but its not working. it still shows the default icons

here is my code,

                      <Tree
                          defaultExpandAll={false}
                          selectable={false}
                          switcherIcon={(obj) =>
                            obj.expanded ? (
                              <i className="fa-solid fa-arrow-down"></i>
                            ) : (
                              <i className="fa-solid fa-arrow-up"></i>
                            )
                          }
                        >

here is a code sample https://codesandbox.io/s/inspiring-ride-jqnlzo?file=/App.jsx

[berber1016]

hello, I think you should understand that the principle of this switcherIcon is to override, not replace you can see this link https://codesandbox.io/s/romantic-galois-464kr5?file=/App.jsx

[AHorak]

It works for me this way:

import { TreeNodeProps } from "rc-tree/lib/TreeNode";

...

const switcherIcon = (props: TreeNodeProps) => {
    if (props.isLeaf) {
        return (
            <span style={{ visibility: "hidden" }}>
                <div style={{ display: "inline-block", height: 16, width: 16 }} />
            </span>
        ); // size of an invisible icon
    } else {
        if (props.expanded) {
            return <BootstrapIcon icon="chevron-right" />;
        }
        return <BootstrapIcon icon="chevron-down" />;
    }
};

[vyrotek]

The current implementation leaves the original switcher "behind" the new icon you add. This doesn't work well when the icon you want to replace it with has any transparency. The current demo implementations are a hack and set a solid background color to hide the original switcher.