讓SVG以組件的方式引入吧！

安裝

npm i -D vue-svg-loader

or

yarn add -D vue-svg-loader

webpack 配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      },
    ],
  },
};

vue-cli 3 配置

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};

如何使用

<template>
  <nav>
    <a>
      <WebpackLogo class="logo" />
      webpack
    </a>
  </nav>
</template>
<script>
import WebpackLogo from './public/webpack.svg';

export default {
  name: 'Example',
  components: {
    WebpackLogo
  },
};
</script>
<style scoped lang='scss'>

.logo {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  fill: #336699;
  &:hover {
      fill: #ff3366;
  }
}
</style>

從以上代碼看出，我們可以很方便的改變 svg 屬性，而且比 url 引入和直接嵌入 HTML 看起來好很多。推薦大家使用。