如何在 Nuxt 应用程序中包含内联 .svg

Posted 2023-02-22

【中文标题】如何在 Nuxt 应用程序中包含内联 .svg

【英文标题】：How to include inline .svg in Nuxt application

【发布时间】：2020-05-19 11:38:38

【问题描述】：

我想做一件普通的事情——在 Vue Nuxt 应用程序中动态包含一个 svg html，我可以设置它的样式。为此，我创建了一个组件，但不是图像，而是文本 data:image/svg+xhtml...。

如何让它发挥作用？

<template>
   <div v-html="src"></div>
</template>
<script>
export default 
    name: 'Icon',
    props: 
        name: 
            type: String,
            required: true
        
    ,
    computed: 
        src() 
            const src = require(`assets/icons/$this.name.svg`)
            return src
        
    

</script>

【参考方案1】：

这并不容易，我尝试了一堆“看起来”应该可行的不同解决方案。

我的理解是，它归结为 Webpack 如何处理“图像”资产以及使用它们内联和独立使用它们会改变定义。

我有一个需要代码访问的 SVG 图标库（例如在运行时更改颜色），所以我必须将 SVG 内联。这就是我登陆的地方，它并不理想，但它有效。

---

使用 SVG 名称的 prop 插槽创建一个新组件。在该组件内添加所有 svg 作为代码。将每一个都包装在一个 v-if 中。

<template>
   <div class="svgIcon">
      <svg v-if="icon == 'name1'">...</svg>
      <svg v-if="icon == 'name2'">...</svg>
      <svg v-if="icon == 'name3'">...</svg>
      <svg v-if="icon == 'name4'">...</svg>
   </div>
</template>
<script>
  export default 
    props: ['icon']
  
</script>

然后通过在插槽中填写你想要的名称来使用组件

<template>
   <div>
      <svgIcons :icon="name1"></svgIcons>
   </div>
</template>
<script>
  import svgIcons from '../path/to/iconsComponent.vue'
  export default 
    components:  svgIcons ,
    ...
  
</script>

【参考方案2】：

看起来@nuxtjs/svg 会做你想做的事。安装后尝试：

<template>
   <div v-html="src"></div>
</template>
<script>
export default 
    name: 'Icon',
    props: 
        name: 
            type: String,
            required: true
        
    ,
    computed: 
        src() 
            const src = require(`assets/icons/$this.name.svg?raw`)
            return src
        
    

</script>

【讨论】：

不错。我试图在一个直接的 Vue 项目中做到这一点。 Nuxt 插件是一个更好的解决方案。

@laptou 我现在有文本 /_nuxt/5476b1293b10e0056bf8a8f9cf8c93c4.svg 而不是图像

我遇到了同样的问题，并用<component v-bind:is="src"></component> 替换了<div v-html="src"></div>。 src 计算属性也可以返回这个return require(`assets/icons/$this.name.svg?inline`).default

赞成如果你所有的 svg 文件都在 node_modules 文件夹中

@PirateApp 为什么要将 SVG 文件放在 node_modules 文件夹中？