React中导入SVG为ReactComponent后双击触发文本高亮问题求助

除了使用user-select: none，还有以下几种可行方案：

• 针对双击事件阻止默认行为
  Chrome的文本选中是双击事件的默认行为，之前用onClick无效是因为触发的是双击事件。给SVG组件绑定onDoubleClick事件并调用preventDefault即可：

  <SeekingLeft className="icon" onDoubleClick={(e) => e.preventDefault()} />
  

• 设置SVG为不可拖拽
  给SVG添加draggable="false"属性，能避免Chrome因拖拽逻辑触发的文本选中：

  <SeekingLeft className="icon" draggable="false" />
  

• 用交互式元素包裹SVG
  如果你的图标需要交互（比如点击），可以用<button>标签包裹SVG。按钮元素默认会阻止一些浏览器默认选中行为，记得重置按钮的默认样式：

  <button className="icon-btn">
    <SeekingLeft className="icon" />
  </button>
  

  对应的CSS样式：

  .icon-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    /* 可选：去掉按钮的聚焦轮廓 */
    outline: none;
  }
  

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