在Gridsome中使用svg图片的方法

通常咱们在Gridsome中使用svg图片，往往图片显示不出来

需要以下步骤

使用SVG作为组件

• 先安装插件

npm i -D vue-svg-loader

• 需要在其中更新webpack配置gridsome.config.js以使用新的加载器

module.exports = {
//第一种方法
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
  //第二种 配置加载svg图片显示
  // chainWebpack(config, { isServer }) {
  //   config.module.rules.delete('svg')
  //   config.module.rule('svg')
  //     .test(/\.svg$/)
  //     .use('vue')
  //     .loader('vue-loader')
  //       .end()
  //     .use('svg-to-vue-component')
  //     .loader('svg-to-vue-component/loader')

  //   if (isServer) {
  //     config.externals(nodeExternals({
  //       whitelist: [
  //         /\.css$/,
  //         /\?vue&type=style/,
  //         /vue-instantsearch/,
  //         /instantsearch.js/,
  //         /typeface-league-spartan/
  //        ]
  //     }))
  //   }
  // },
}

• 然后，您可以像任何Vue组件一样从Vue模板中导入SVG：

<script>
  import Brand from '~/assets/svgs/Brand.svg'
  export default {
    components: {
      Brand
    }
  }
</script>

• 在template中像组件一样进行使用。