自定义组件库中能否通过标签操作SvgIcon？移除<strong>标签异常

以下是几个可行的解决思路，按优先级排序：

• 排查组件内部实现
  既然用的是自定义组件库，先去查看SvgIcon.PreviewDocument的源码。其他图标正常显示，说明大概率是这个图标组件的SVG代码里嵌套了<strong>标签，或者组件的渲染逻辑中自动添加了这个标签。找到对应位置直接移除即可。

• 用CSS强制重置样式
  如果暂时找不到源码修改入口，直接通过CSS覆盖<strong>的样式，让它不影响图标显示：

  /* 精准定位到目标图标内的strong标签 */
  .PlainButton .SvgIcon.PreviewDocument strong {
    all: unset; /* 重置所有样式为继承值 */
    display: inline-block; /* 保证图标布局正常 */
  }
  

  或者针对性重置关键样式：

  .PreviewDocumentIcon strong {
    font-weight: normal;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: transparent;
    border: none;
  }
  

• 检查PlainButton的渲染逻辑
  验证下是不是PlainButton组件对特定子元素自动添加了<strong>标签。可以临时把PreviewDocument换成其他正常显示的图标，查看按钮内部的DOM结构，如果此时没有<strong>标签，就说明是按钮组件针对这个图标做了特殊处理，需要调整按钮的逻辑。

• 应急DOM操作（不推荐）
  要是上面的方法都走不通，用React ref手动移除<strong>标签作为临时方案：

  import { useRef, useEffect } from 'react';
  
  // ...
  
  const iconRef = useRef(null);
  
  useEffect(() => {
    if (!iconRef.current) return;
    const strongEl = iconRef.current.querySelector('strong');
    if (strongEl && strongEl.parentNode) {
      // 将strong内的内容移到父节点，再删除strong标签
      while (strongEl.firstChild) {
        strongEl.parentNode.insertBefore(strongEl.firstChild, strongEl);
      }
      strongEl.parentNode.removeChild(strongEl);
    }
  }, []);
  
  // 在图标组件上绑定ref
  <SvgIcon.PreviewDocument ref={iconRef} width={19} height={19} />
  

内容的提问来源于stack exchange，提问作者Nicholai Mørch Rindarøy