在Docusaurus中如何为外部链接添加SVG图标？

可以通过CSS伪元素实现，无需修改现有HTML结构，具体实现方式如下：

• 筛选外部链接：用CSS属性选择器定位所有指向外部域名的链接，排除自身站点链接（将代码里的your-domain.com替换成你自己的域名即可）
• 添加图标样式：借助::after伪元素插入目标图标，同时调整图标大小、间距、对齐方式等样式

/* 匹配所有以http开头且不包含自身域名的外部链接 */
a[href^="http"]:not([href*="your-domain.com"])::after {
  content: '';
  display: inline-block;
  width: 12px; /* 按需调整图标宽度 */
  height: 12px; /* 按需调整图标高度 */
  margin-left: 4px; /* 调整图标与文字的间距 */
  background-image: url('https://i.sstatic.net/smDHD.png');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle; /* 让图标和文字垂直对齐 */
}

如果站点有多个子域名，可扩展选择器范围：

a[href^="http"]:not([href*="your-domain.com"]):not([href*="sub.your-domain.com"])::after {
  /* 沿用上述样式即可 */
}

要是需要给图标加交互效果，比如hover时的透明度变化，可补充：

a[href^="http"]:not([href*="your-domain.com"]):hover::after {
  opacity: 0.7;
}

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