是否有办法将Sveltekit中的静态文件的内容复制到字符串中?

Question

我正在尝试用Sveltekit构建一个web应用程序。

目前我正在工作的一个简单的导航，其中应包括一个文本和每个路径的图标。我想动态地生成它所以我这样做:

<script lang="ts">
export let currentRoute: string;
type Route = { icon: string; name: string; path: string };
const routes: Route[] = [
{ icon: '', name: 'Home', path: '/' },
{ icon: 'icons/servers.svg', name: 'Servers', path: '/servers' }
];
</script>
<nav>
<ul>
{#each routes as route}
<li class:active={currentRoute === route.path}>
<a href={route.path}>
<img src={route.icon} alt="" />
<p>{route.name}</p>
</a>
</li>
{/each}
</ul>
</nav>

这一切都工作得很好，但我实际上想改变文本的颜色和svg时，相应的li标签有类活动(这意味着它是当前路由)。当我使用img时，我不能直接在css中改变颜色，所以我的想法是以某种方式通过代码读取静态svg文件并输出它们以保持一切动态。

所以问题是:是否有一种方法来读取每个静态svg文件的内容，只是将它们复制到一个变量，以保持一切干净?

Answer 1

有几种方法可以绕过这个。

svg作为组件

一种是让所有svg文件组件自己，只命名文件Server.svelte，并保持文件本身的内容相同。然后包含此组件并正常使用它。这将在你的html内嵌svg，你可以像一般的样式。

我总是有

<svg viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor">

这确保图标与周围的文本缩放，并采取它的颜色。

(如果不想将文件重命名为.svg，也可以使用插件导入.svg文件)

引用包含的svg

另一个技巧是写' ' ' html

This requires you have somewhere else in your html the following
```html
<svg xmlns="http://www.w3.org/2000/svg" style="display: none" viewBox="0 0 24 24">
<defs>
<g id="myicon">
<path d="..." fill="currentColor" />
</g>
</defs>
</svg>

这将或多或少与前一个方法相同。怎么把这些都包括进去对你来说是p。一个想法是制作一个icons.svelte文件，其中包含所有图标作为定义，并将其包含在顶层。另一个组件图标。svelte为你设置了xlink:href块，这样你就可以在需要图标的地方设置<Icon id="myicon" />