javascript 如何在AstroJS中使用SVG？

mwg9r5ms 于 2023-04-28 发布在 Java

关注(0)|答案(2)|浏览(183)

前往他们的Docs @ AstroDocs

Astro.js示例 *

import imgReference from './image.png'; // imgReference === '/src/image.png'
import svgReference from './image.svg'; // svgReference === '/src/image.svg'
import txtReference from './words.txt'; // txtReference === '/src/words.txt'
// This example uses JSX, but you can use import references with any framework.
<img src={imgReference} alt="image description" />;

它们导入并引用文件。
我想做的事情：
1.移动/public和/src中的SVG以隔离这种情况。
1.将文件重命名为ui。svg来简化命名问题。
1.将svg作为组件导入。
似乎什么都不管用。有什么帮助吗？

我的索引天文 *

---
// import Settings from './icons/Settings.svg';
import ui from '../ui.svg'; // moved here and renamed file to remove potential issues.
---
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Mudriy | Home</title>
    </head>
    <body>
        <h1>Astro</h1>
        <!-- <img src={Settings} alt="ff"/> -->
        <img src={ui} />
    </body>
</html>