Início / coding / Perguntas / 79234941
Accepted
xkeshav
Asked: 2024-11-29 01:59:06 +0800 CST

componente de ícone dinâmico carrega um svg, mas não outro

  • 772

Usando Astro v 4.8.0

tendo um componente de ícone reutilizável que carrega ícones que estão na biblioteca public/icons e quando eu passo o nome ele inclui o nome do arquivo e exibe o ícone.

agora o problema é que um ícone svg carrega, mas o outro não carrega e se colarmos isso diretamente

Arquivo 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>

e aqui está como usar no 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>

ícones/seta.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>

usando AstroIcon; o primeiro ícone é exibido, mas o segundo não.

qual poderia ser o problema aqui? embora precisemos adicionar <symbol>para obter o valor ao referenciar o Astro e remover <symbool>ao inserir SVG diretamente, essa é a única alteração que fiz.

Aqui está a demonstração de trabalho reproduzível

html

1 respostas

  1. Best Answer

    Seu ícone é renderizado, mas sem uma cor de traço e dimensionado incorretamente.

    Você pode corrigir esse problema movendo o viewBoxe os strokeatributos para o elemento <symbol>ou <path>assim:

    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>

    Dessa forma, a <use>instância pode herdar a cor do traço da cor do texto pai e dimensionar a viewBox 24x24 para a nova dimensão.

    Na verdade, você não precisa dimensionar o viewBox, basta copiar o viewBox 24x24 do símbolo e alterar o tamanho do layout por meio das propriedades de largura e altura.

    • 1

relate perguntas