如何将svg文件导入Vue组件? | 如何将svg文件导入Vue组件

本文介绍了如何将svg文件导入Vue组件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在vue单个文件组件中，我导入了一个svg文件，如下所示:import A from 'a.svg'然后如何在组件中使用A?

In vue single file component.I import a svg file like this:import A from 'a.svg'And then how can I use A in my component?

推荐答案

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

Based on the information you provided, what you can do is:

安装vue-svg-loader

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

配置webpack:

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

导入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

这篇关于如何将svg文件导入Vue组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！