在NuxtJS中使用SVG内联的最佳软件包是什么？

Question

我找到了在NuxtJS中使用内联SVG的最佳软件包，可以将其呈现为HTML。我使用这个包：svg-inline-loader。它显示SVG HTML，但必须在文档中插入所有SVG才能使用：查看此示例。它必须具有插入<svg v-html="require('~/assets/sprite.svg')"></svg>才能渲染SVG。

你们知道哪种包装更适合内联SVG吗？

Answer 1

是的，请使用vue-svg-loader。

使用npm或进行安装yarn：

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

然后配置您的webpack配置：

{
  test: /\.svg$/,
  loader: 'vue-svg-loader'
}

编辑：或与vue-cli-3.*（在中vue.config.js）：

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

  svgRule.uses.clear()
  svgRule
    .use('vue-svg-loader')
    .loader('vue-svg-loader')
    .options({
      svgo: false
    })
}

最后是.vue文件中的用法示例：

<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>

查看更多：docs。