最稳妥方式是用transform: scalex(-1)翻转纯装饰性图标，它兼容性好、不扰文档流；但需配合:dir(rtl)伪类实现自动切换，避免祖先dir影响，并确保交互图标同步调整transition方向以防重复翻转。
直接用 transform: scaleX(-1) 翻转图标最稳妥
物理方向类图标（如箭头、折叠三角、返回按钮）在 RTL 下必须镜像，transform: scaleX(-1) 是目前兼容性最好、副作用最小的方式。它不改变文档流、不影响点击区域、也不依赖父容器 dir 值是否生效。
常见错误是改 background-position 或硬调 margin-left → margin-right，结果在嵌套 RTL 容器里重复翻转，或者和逻辑属性冲突。
- 只对纯装饰性图标用，交互型图标（如带 hover 动画的按钮）需同步翻转
transition方向 - 避免在已用
flex-direction: row-reverse的容器里再加此 transform，否则图标会“翻两次” - SVG 内联图标可直接加
transform="scaleX(-1)"属性，比 CSS 更精准
:dir(rtl) 伪类适配图标方向更语义化
比起全局写死 .icon-arrow { transform: scaleX(-1) }，用 :dir(rtl) 可以让同一套图标在 LTR/RTL 页面中自动切换，且不会污染非 RTL 上下文。
但要注意：该伪类只匹配元素自身 dir 属性值为 rtl，或继承自有 dir="rtl" 的祖先——如果父级用了 direction: rtl 但没设 dir 属性，:dir(rtl) 不会命中。
- 推荐写法：
.icon-chevron:dir(rtl) { transform: scaleX(-1); } - 不要写成
[dir="rtl"] .icon-chevron，这样会受祖先dir影响，而 :dir(rtl) 是元素自身的 bidi 方向判断 - React/Vue 组件中动态渲染时，确保图标元素本身或其最近的块级父容器带有
dir属性，否则伪类无效
别碰 float: left/right，改用逻辑属性控制图标位置
很多老项目用 float: left 把图标塞在文字左边，RTL 下想“让它去右边”就直接改成 float: right——这会导致在混合方向内容中出错，而且 float 已被现代布局淘汰。
真正该做的是把物理定位换成逻辑定位：float: inline-start（Chrome 125+）、margin-inline-start、justify-self: start 等。这些属性会根据当前文本方向自动映射到左或右。
- IE 不支持逻辑属性，如需兼容，仍得回退到
:dir(rtl)+ 物理属性覆盖 -
inline-start比start更明确，避免 Grid/Flex 中歧义 - 图标与文字间距优先用
gap或margin-inline-end，而非margin-right
SVG 图标用 dir="auto" 或显式 dir="rtl" 控制内部文本方向
SVG 里的 <text></text> 元素默认按页面方向渲染，但若 SVG 是内联的、又嵌在 LTR 容器里显示阿拉伯文字，就会出现文字从左往右“挤在一起”的问题。
解决方式不是给整个 SVG 加 transform，而是控制其内部文本流向：
- 给
<svg></svg>标签加dir="auto"，让浏览器根据第一个强方向字符自动判定（适合用户生成内容） - 服务端已知语言时，直接写
dir="rtl"，比 JS 判断更可靠 - 避免在
<text></text>上单独设direction，容易被外层dir覆盖或冲突
最难的不是怎么翻转图标，而是翻转后点击热区是否还对得上——尤其当图标是 position: absolute 或用 clip-path 裁剪过时，transform 会移动视觉位置但不改变坐标系原点。真要压测 RTL，得连 pointer-events 区域一起验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
