从 Nuxt 中的 static/assets 文件夹提供 SVG 内容

Question

我的站点中有很多 SVG，它们有很多路径，所以我不想用它们弄乱我的代码，而是在浏览器中显示完整代码。

在PHP中有一个神奇的函数叫做file_get_contents('path')

在 Nuxt 中有替代方案吗？到目前为止，唯一的选择是将其用作常规 img 标签，禁止所有样式。

Answer 1

查看 @nuxtjs/svg 模块 (NPM)。使用该模块，您可以在脚本中导入 svg，并像模板中的组件一样使用它们。

<template>
  <NuxtLogo class="logo" />
</template>
 
<script>
  import NuxtLogo from "~/assets/nuxt.svg?inline";
 
  export default {
    components: { NuxtLogo },
  };
</script>

<style scoped>
.logo {
  fill: #fff;
}
</style>

从 Nuxt 中的 static/assets 文件夹提供 SVG 内容

Serving SVG content from static/assets folder in Nuxt

vue.js

nuxt.js

nuxtjs