我正在使用其API显示FontAwesome图标，并且图标溢出了容器。它们在其他元素旁边的位置不正确。有没有一种方法可以使图标完全适合其容器，而无需使用任意填充或其他技巧？

在此示例中，您可以看到图标溢出了容器的边框，并且相邻的input与加号重叠。

<script>
import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
import { icon } from '@fortawesome/fontawesome-svg-core';

library.add(faPlus);

const plus = icon({ prefix: 'fas',iconName: 'plus'},{transform: {size: 32} });

</script>

<div style="border: 1px solid black; display: flex;">
  {@html plus.html}
  <input />
</div>

https://glitch.com/edit/#!/shore-buffet

此代码段使用Svelte语法，只是因为它对Glitch方便。