如何为引入的Icon组件应用SVG内联旋转样式？

我从图标库中引入了图标，希望在代码中将其旋转90度以满足需求。尝试为图标组件添加transform='rotate(90deg)'属性，但未生效，不过在开发者工具中使用该属性可正常生效。

<IconButton
        flat
        primary
        icon={
          isAllExpanded ? (
            <ChevronRightDoubleIcon width={16} color={ICON_COLOR} transform='rotate(90deg)'/>
          ) : (
            <ChevronLeftDoubleIcon color={ICON_COLOR} />
          )
        }
      />

我还尝试将IconButton包裹在独立div中并应用CSS样式，但即使仅包裹该IconButton，仍会修改页面中所有图标。

<DoubleArrow>
      <IconButton
        flat
        primary
        icon={
          isAllExpanded ? (
            <ChevronRightDoubleIcon width={16} color={ICON_COLOR} />
          ) : (
            <ChevronLeftDoubleIcon color={ICON_COLOR} />
          )
        }
      />
      </DoubleArrow>

export const DoubleArrow = styled.div`
  #ChevronRightDoubleIcon {
  svg {
      transform: rotate(90deg);
    }
`; 

请问是否有办法直接在所需的图标标签上应用SVG旋转样式？

方法1：用内联style属性直接传递旋转样式 #

大部分图标库组件支持通过style属性接收CSS样式，直接把transform写在这里，优先级更高，不会被全局样式干扰：

<ChevronRightDoubleIcon 
  width={16} 
  color={ICON_COLOR} 
  style={{ transform: 'rotate(90deg)' }} 
/>

方法2：给图标加唯一类名，精准定位样式 #

之前用ID选择器的问题是，全局如果有多个同名ID会导致样式批量生效，换成类名更稳妥，同时确保样式只作用于当前包裹的图标：

<DoubleArrow>
  <IconButton
    flat
    primary
    icon={
      isAllExpanded ? (
        <ChevronRightDoubleIcon width={16} color={ICON_COLOR} className="rotate-90-icon" />
      ) : (
        <ChevronLeftDoubleIcon color={ICON_COLOR} />
      )
    }
  />
</DoubleArrow>

export const DoubleArrow = styled.div`
  .rotate-90-icon svg {
    transform: rotate(90deg);
    transform-origin: center; /* 可选，确保旋转中心在图标正中间 */
  }
`;

方法3：尝试图标库自带的旋转属性 #

部分图标库（比如Material UI）的图标组件提供了专门的rotate属性，直接传入角度数值即可，是最简洁的方式：

<ChevronRightDoubleIcon 
  width={16} 
  color={ICON_COLOR} 
  rotate={90} 
/>

内容的提问来源于stack exchange，提问作者user2128