动态图标组件加载一个 svg 但不加载其他

Question

使用 Astro v 4.8.0

具有和重用图标组件，加载公共/图标库下的图标，当我传递名称时，它包含文件名并显示图标。

现在的问题是，一个 svg 图标会加载，但其他图标不会加载，如果我们直接粘贴它

AstroIcon.astro 文件

---
interface Props {
  name: string
    title: string;
}

const { name, title } = Astro.props;
console.log({name, title})
---

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-label={title}>
  <use href=`/icons/${name}.svg#${name}`  />
</svg>

这是如何在 Menu.astro

中使用

    <AstroIcon name="hamburger" title="this works"/>
    <AstroIcon name="arrow" title="this does not work"/>
    <p>direct svg insertion</p>
  <section>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      height="24"
      width="24"
    >
    <title>Arrow</title>
      <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"></path>
    </svg>
</section>

图标/arrow.svg

<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  stroke-width="1.5"
  stroke="currentColor"
  height="24"
  width="24"
>
  <symbol id="arrow">
    <title>Arrow</title>
    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"></path>
  </symbol>
</svg>

使用 AstroIcon；第一个图标显示，但第二个图标不显示。

这可能是什么问题？虽然我们需要在引用 Astro 时添加

<symbol>

来获取值，并在直接 SVg 插入时删除

<symbool>

，但这只是我所做的更改。

这是可重现的工作演示

Answer 1

您的图标实际上已渲染，但没有描边颜色并且缩放不正确。

您可以通过将

viewBox

以及

stroke

属性移动到

<symbol>

或

<path>

元素来解决此问题，如下所示：

svg {
  display: block;
  outline: 1px solid #ccc;
  overflow: visible;
}

<svg viewBox="0 0 24 24" aria-label="this is arrow" >
  <use href="#arrow" style="color:red" />
</svg>

<svg viewBox="0 0 100 100" aria-label="this is arrow" >
  <use href="#arrow" style="color:red" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="arrow" viewBox="0 0 24 24" >
    <title>Arrow</title>
    <path fill="none" stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"></path>
  </symbol>
</svg>

这样

<use>

实例就可以从父文本颜色继承描边颜色，并将 24x24 viewBox 缩放到新尺寸。

事实上，您根本不需要缩放 viewBox，只需复制符号的 24x24 viewBox 并通过 width 和 height 属性更改布局大小即可。