在 React 中以 ReactComponent 方式导入 SVG 时，Chrome 浏览器默认的双击文本选择行为会意外高亮相邻可选文本元素；可通过 CSS 的 user-select: none 安全、简洁地禁用该行为。
在 react 中以 `reactcomponent` 方式导入 svg 时，chrome 浏览器默认的双击文本选择行为会意外高亮相邻可选文本元素；可通过 css 的 `user-select: none` 安全、简洁地禁用该行为。
这是一个在 Chrome（及部分基于 Chromium 的浏览器）中常见的交互细节问题：当用户双击一个 SVG 图标（尤其是作为 <svg></svg> 元素内联渲染的 React 组件）时，浏览器会尝试执行“扩展文本选择”逻辑——由于 SVG 本身不可选、无文本内容，引擎会自动将选择范围延伸至 DOM 树中最近的、包含可选文本的兄弟或祖先级兄弟元素，从而造成非预期的文本高亮。
虽然 onClick 中调用 e.preventDefault() 或 e.stopPropagation() 无法解决此问题（因为双击选中属于浏览器原生的 selectstart/selectionchange 行为，而非事件冒泡链中的标准事件），但 CSS 层面的控制极为有效且语义清晰。
✅ 推荐解决方案：为 SVG 组件添加 user-select: none
你可以在组件样式中直接设置：
.icon {
user-select: none;
/* 可选：增强兼容性 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}或在 JSX 中通过 style 内联（适用于动态场景）：
<SeekingLeft
className="icon"
style={{ userSelect: 'none', WebkitUserSelect: 'none' }}
/>⚠️ 注意事项：
-
user-select: none仅禁用用户主动选择行为，不影响 SVG 的点击、hover、焦点等交互能力； - 不会影响屏幕阅读器对 SVG 的无障碍访问（如
aria-label、role="img"仍正常工作）； - Firefox 和 Safari 同样支持该属性，因此该方案具备跨浏览器一致性；
- 避免全局设置
* { user-select: none }，否则会破坏所有文本的可复制性。
? 进阶提示：若项目使用 CSS-in-JS（如 Emotion、Styled Components），可封装为可复用的 SVG 基础样式：
const SvgIcon = styled.svg` user-select: none; -webkit-user-select: none; `;
然后统一替换所有 SVG 组件的外层容器为 <svgicon></svgicon>，实现一键治理。
总之，user-select: none 是语义正确、零副作用、广泛兼容的标准解法——无需 hack、不侵入逻辑、不依赖 JS 拦截，是处理 SVG 双击误选问题的最佳实践。
