添加显示块到svg容器：

.svg {
  display: inline-block;
}

我找到的唯一解决方案需要对原始HTML进行一次糟糕的更改。
为了确保图标不会单独出现在新的一行中，我用white-space: no-wrap;将最后一个单词和图标 Package 在一个新元素中，另外，如果我们希望它仍然可以拆分，如果行不能容纳最后一个单词和图标，我们可以使这个新容器内联flex和flex-wrappable。

<div>
  Lorem ipsum dolor sit
  <span class="last_word">
      very_long_last_word
      <svg>...</svg>
  </span>
</div>

.last_word {
  /* Stick icon to last word */
  white-space: no-wrap;  
  
  /* Make sure last word and icon will break ultimately */
  display: inline-flex;
  flex-wrap: wrap; 
}

示例：https://jsfiddle.net/uerzo6sa/

您可以使用此标记来防止换行。它不需要包含最后一个单词，因此您甚至可以在生成的内容中使用它。

JSX

<div>
  {children}
  <span className="tail">
      {'\u00a0'}
      <svg></svg>
  </span>
</div>

HTML

<div>
  Lorem ipsum dolor sit<span class="tail">&nbsp;<svg></svg></span>
</div>

CSS

.tail {
  white-space: no-wrap;  
}

https://jsfiddle.net/radarfox/65h40jt7/

您可以在SVG上定义position: absolute，用auto表示top、right等。
https://codepen.io/jsit/pen/xxOQoVW
唯一的副作用是这将允许SVG出现在包含框之外;这在某种意义上就是它起作用的原因。