如何將svg文件導入到Vue組件？

Question

在VUE單個文件component.I導入SVG文件是這樣的： import A from 'a.svg' 然後，我怎麼能用到我的組件？

Answer 1

基於你提供的信息，你可以做的是：

1. 安裝VUE-SVG-裝載機

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