Problem in refreshing conditional rendering to render different icons in Tool

[SDasBentley]

How to refresh icons of Tool like we use to do using refresh() method of deprecated ConditionalIconItem class? After depreciation it recommends using conditional rendering, but it is not getting refreshed and icons not changing based on condition due to that.

[anmolshres98]

I ran into a similar problem and this is how we solved it for our app.

...
onSomeEventTriggered = new BeEvent<(activate: boolean) => void>();
...

export const SomeToolBarIcon = ({ onSomeEventTriggered }: { onSomeEventTriggered: BeEvent<(activate: boolean) => void> }) => {
  const [active, setActive] = useState(false);
  onSomeEventTriggered.addListener((activate: boolean) => {
    setActive(activate);
  });
  return (
    <svg style={{ fill: active ? "var(--iui-color-icon-accent)" : "" }}>
      ...
    </svg>
  );
};

ToolbarItemUtilities.createActionItem({
      id: ...,
      label: ...,
      itemPriority: ...,
      groupPriority: ...,
      icon: <SomeToolBarIcon onSomeEventTriggered={this.onSomeEventTriggered} />,
      execute: ...
});
/* call onSomeEventTriggered.raiseEvent(bool) somewhere in your code where you want the icon to change conditionally */

This shows how certain action will trigger the icon's fill style to change and we have this working on our app.

You can use other basic React principles and conditional statements to achieve your goal and don't have to go with the implementation we landed on of course.

[GerardasB]

You can find usage example of ConditionalIconItem replacement in the release notes: https://github.com/iTwin/appui/releases/tag/release%2F4.16.0

Here's an example usage in one of our stories:

appui/docs/storybook/src/components/ToolbarComposer.stories.tsx

Lines 241 to 244 in 54faa10

	function ConditionalReactIcon() {
	const val = useConditionalValue(getVal, [eventId]);
	return val % 2 === 0 ? <SvgAdd /> : <SvgRemove />;
	}