如何获得svg图标作为单个svg

Question

const star = () => (
<>
{Array(5)
.fill("")
.map((_, i: any) => (
<svg
key={i}
fill="gray"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
))}
</>
);

这是我获得5星SVG的函数，在这里它被渲染为5个独立的SVG图标。我如何将其渲染为一个SVG。星星的数量可能会不时变化。简单地说，我想让所有的循环*作为一个SVG，而不是包装为SVG.

Answer 1

这很有趣，通常我们希望svg放在一个地方。

但我认为你问的是可以做到的，因为你可以定义一个组件与星号的svg块。

const Star = () => <g><path d=""></g>

然后像往常一样定义投票组件

const StarsIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg">
<Star />
<Star />
<Star />
<Star />
<Star />
</svg>
)

所以可以做到。

注意:

但是对于进一步的定制，不建议这样做。如果用户停留在其中一颗星上，稍后点亮一颗星怎么样?

基本上，如果你采用你的方法，那么所有的逻辑都需要在StarsIcon中构建，与过去相比，我们可以在单个Star中编写单个逻辑。只是从成本的角度来看。