如何将svg文件导入Vue组件？

Question

在vue单个文件组件中.我导入一个像这样的svg文件: import A from 'a.svg' 然后如何在我的组件中使用A？

Answer 1

我已经在 Vue 3 中使用了以下内容。不需要弄乱 webpack 或安装任何第三方插件。

<template>
  <img :src="mySVG" />
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      mySVG: require('./assets/my-svg-file.svg')
    }
  }
}
</script>

注意：我知道在 img src 中使用它时不能修改 SVG 的某些部分，但是如果您只是想像使用任何其他图像一样使用 SVG 文件，这似乎是一个快速而简单的解决方案。

Answer 2

根据您提供的信息,您可以做的是:

1. 安装vue-svg-loader

npm install --save-dev vue-svg-loader

2. 配置webpack:

module: {
    rules: [
      {
       test: /\.svg$/,
       loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
      },
    ],
  },

3. 导入svg并将其用作常规组件:

<template>
  <nav id="menu">
    <a href="...">
      <SomeIcon class="icon" />
      Some page
    </a>
  </nav>
</template>

<script>
import SomeIcon from './assets/some-icon.svg';

export default {
  name: 'menu',
  components: {
    SomeIcon,
  },
};
</script>

参考:https://github.com/visualfanatic/vue-svg-loader

Answer 3

如果你可以控制svg文件,你可以将它包装在vue文件中,如下所示:

a.vue:

<template>
  <svg>...</svg>
</template>

之后只需要这样的文件: import A from 'a.vue'

Answer 4

你也可以使用这样的东西：

<template>
  <img :src="logo"></img>
</template>

<script>
import logo from '../assets/img/logo.svg'

export default {
  data() {
    return {
      logo
    }
  }
}
</script>

这不需要安装外部模块并且开箱即用。

Answer 5

如果您使用的是Webpack，则可以使用require上下文从目录加载SVG文件。请注意，这会将所有SVG文件放入Javascript文件中，但可能会使您的代码code肿。

作为简化示例，我正在使用此svg组件：

data() {
    return {
        svg: ''
    };
},

props: {
    name: {
        type: String,
        required: true
    }
}

created() {
    this.svg = require(`resources/assets/images/svg/${this.name}.svg`);
}

模板看起来像这样：

<template>
    <div :class="classes" v-html="svg"></div>
</template>

通常，您不能像那样简单地加载SVG文件并期望它们与v-html指令一起使用，因为您没有得到原始输出。您必须使用Webpack，raw-loader因此请确保获得原始输出：

{
    test: /\.svg$/,
    use: [
        {
            loader: 'raw-loader',
            query: {
                name: 'images/svg/[name].[ext]'
            }
        },
        {
            loader: 'svgo-loader',
            options: svgoConfig
        }
    ]
}

上面的示例还使用了，svgo-loader因为如果沿着这条路线走，您将需要大量优化SVG文件。

希望这可以帮助您或其他任何人解决该问题，而不必直接研究第三方解决方案。

Answer 6

我只会使用vue-svg

通过 Vue CLI 3安装：

vue add svg

输入：

<img src="@/assets/logo.svg?data" />

输出：

<img src="data:image/svg+xml;base64,..." />

或者这也是工作...

import LogoImage from "@/assets/logo.svg?inline"