如果按一般方法引入SVG，打印出来的只是字符串路径。

    1. <script lang="ts">
    2.   import x from "@/assets/icons/label.svg"
    3.   console.log(x)    //字符串路径
    4. </script>

    需要按照以下步骤：

    使用svg-sprite-loader引入icon

    1. 安装svg-sprite-loader
    1. yarn add svg-sprite-loader -D
    2. //作用是将svg变成symbol标签，再将symbol标签放到svg标签里面。
    1. 添加配置vue.config.js文件
    1. const path = require('path')
    3. module.exports = {
    4.     lintOnSave: false,
    5.     chainWebpack: config => {
    6.         const dir = path.resolve(__dirname, 'src/assets/icons')
    8.         config.module
    9.             .rule('svg-sprite')
    10.             .test(/\.svg$/)
    11.             .include.add(dir).end()
    12.             .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract: false}).end()
    13.             .use('svgo-loader').loader('svgo-loader')
    14.             .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]}))
    15.             .end()
    16.         config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
    17.         config.module.rule('svg').exclude.add(dir)
    18.     }
    19. }

    这时如果重新打印会发现打印出来的结果不是字符串路径。

    1. 将svg标签和use标签引入svg即可。
    1. <template>
    2.     <div>
    3.     <svg>
    4.           <use xlink:href="#xxx"/>
    5.       </svg>
    6.   </div>
    7. </template>