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

Question

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

原文由 shangxinbo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

1. 安装 vue-svg-loader

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

1. 配置 webpack：

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

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

原文由 Renato Krcelic 发布，翻译遵循 CC BY-SA 3.0 许可协议