主页 / coding / 问题 / 79234941
Accepted
xkeshav
Asked: 2024-11-29 01:59:06 +0800 CST

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

  • 772

使用 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；第一个图标显示但第二个图标不显示。

这里可能是什么问题？虽然我们需要<symbol>在引用 Astro 时添加以获取值并<symbool>在直接 SVg 插入时删除，但这只是我所做的更改。

这是可重现的工作演示

html

1 个回答

  1. Best Answer

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

    您可以通过将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，只需复制符号的 24x24 viewBox 并通过宽度和高度属性更改布局大小。

    • 1

相关问题