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

Question

我找到了在 NuxtJS 中使用内联 SVG 的最佳包，它可以呈现 HTML。我使用这个包：svg-inline-loader。它显示 SVG HTML，但必须在文档中插入所有 SVG 才能使用：查看此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。