SVG konnte nicht mit Flex zentriert werden

Beim Versuch, das SVG aus dem Sprite-Sheet in meine Seite einzufügen, wird das eingebettete SVG nicht in der Mitte platziert, selbst nachdem die Eigenschaften zum Zentrieren angewendet wurden. Ich bin immer noch etwas verwirrt über diese Art der Einbettung des SVG und die Rolle, die sowohl Viewport als auch Viewbox spielen.

// HTML
<svg class="card__icon">
 <use xlink:href="assets/sprite.svg#share"></use>
</svg>
// CSS
.card__icon {
 width:4rem;
 height:4rem;
 display:flex;
 justify-content:center;
 align-items:center;
}
// Sprite sheet
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <style>
.sprite {
 display: none;
 }
.sprite:target {
 display: inline;
 }
 </style>
 </defs>
 <g fill="none" class="sprite" xmlns="http://www.w3.org/2000/svg" id="share">
 <path d="M17.9359 15.9494C17.5431 15.9508 17.1547 16.0317 16.7939 16.187C16.4332 16.3424 16.1075 16.569 15.8365 16.8533L8.72737 13.2958C8.90225 12.7656 8.90225 12.1932 8.72737 11.6629L15.8481 8.0413C16.3582 8.57878 17.0498 8.90742 17.7887 8.96335C18.5275 9.01928 19.2608 8.79849 19.8459 8.34391C20.4311 7.88932 20.8263 7.23341 20.9548 6.50367C21.0832 5.77393 20.9358 5.02248 20.5411 4.39539C20.1464 3.76829 19.5326 3.31035 18.8191 3.11058C18.1056 2.9108 17.3433 2.98346 16.6803 3.31443C16.0174 3.6454 15.5012 4.21104 15.232 4.9014C14.9629 5.59177 14.9601 6.35754 15.2241 7.04987L8.17334 10.6365C7.79254 10.1708 7.27703 9.83425 6.69747 9.67302C6.1179 9.51179 5.50266 9.53375 4.93607 9.73591C4.36948 9.93806 3.87928 10.3105 3.53267 10.8022C3.18606 11.2939 3 11.8807 3 12.4823C3 13.0839 3.18606 13.6707 3.53267 14.1624C3.87928 14.6541 4.36948 15.0265 4.93607 15.2287C5.50266 15.4308 6.1179 15.4528 6.69747 15.2916C7.27703 15.1303 7.79254 14.7938 8.17334 14.3281L15.2066 17.868C15.0878 18.1871 15.0266 18.5248 15.0258 18.8653C15.0258 19.442 15.1968 20.0058 15.5172 20.4853C15.8377 20.9648 16.2931 21.3386 16.8259 21.5593C17.3587 21.78 17.945 21.8377 18.5106 21.7252C19.0763 21.6127 19.5959 21.335 20.0037 20.9272C20.4115 20.5194 20.6892 19.9998 20.8017 19.4342C20.9142 18.8685 20.8565 18.2822 20.6358 17.7494C20.4151 17.2166 20.0413 16.7612 19.5618 16.4408C19.0823 16.1204 18.5185 15.9494 17.9418 15.9494H17.9359Z" fill="currentColor"></path>
 </g>
</svg>

Lösung des Problems

Wenn ich Sie gut verstanden habe, müssen Sie Flex auf das übergeordnete Element des svg-Elements anwenden. Wenn sich Ihr SVG beispielsweise in einem div wie diesem befindet:

<div class="container">
 <svg></svg>
</div>

Dann müssen Sie Flex wie folgt anwenden:

div.container {
 display flex;
 justify-content: center;
 align-items: center;
}