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

Question

我找到了在 NuxtJS 中使用 SVG 内联的最佳包，可以渲染 HTML。我使用这个包：svg-inline-loader. It's display SVG HTML but it must have insert all SVG in document to use: View this example。它必须插入 <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.

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

What is the best package to use SVG inline in NuxtJS?

vue.js

nuxt.js