如何直接加载SVG，而不是通过JS文件导入以在传单Divicon中使用？

Question

我有一个vue 2示例项目，位于 https://github.com/ericg-vue-vue-vue-com-问题/传单检验

我需要在传单内使用此SVG divicon 。

      const cloudIcon = L.divIcon({
        html: thecloud, // this.cloudSvg, // thecloud,
        className: 'my-custom-icons',
        iconSize: [size, size],
        iconAnchor: [size/2, size/2]
      })

此外，我可能需要对SVG进行一些修改，因此我需要实际的SVG源。

什么工作是将SVG源放置在A javaScript文件并通过执行

import {thecloud} from './TheCloud';

：

我确实尝试过：

  data() {
    return{
      cloudSvg: require('./TheCloud.svg')
    }
  },

但是那没有起作用，我看到了：

有办法做到这一点吗？我想避免将SVG源放置在JavaScript文件中的额外步骤。似乎这是不必要的。

Answer 1

我首选的解决方案是使用我所说的提取方法。

我所做的更改是：

1. 将 thecloud.svg 移动到 public/文件夹。
2. 使用 fetch

const response = await fetch( "/TheCloud.svg");
const source = await response.text();

在嵌入源代码中的SVG时，在只有一个或少数svg时可以很好地工作，当SVG的数量变大时，我相信此方法是最好的解决方案。

我已经通过实施的提取方法更新了存储库。

Answer 2

我找到了一种正在起作用的方法，但我相信有一些改进方法。

以下更改在 raw-loader 。

1. YARN添加RAW-LOADER
2. 创建 vue.config.js 在项目的根部使用以下内容，以配置 RAW-LOADER 。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('raw-loader')
      .test(/\.txt$/i)
      .use('raw-loader')
        .loader('raw-loader')
        .end()
  }
}

3. 将我的 data（）方法更改为：

  data() {
    return{
      center: [37.781814, -122.404740],
      cloudSvg: require('./TheCloud.svg'),
      cloudSrc: require('./TheCloud.txt')
    }
  },

添加 cloudsrc：require（'./ thecloud.txt'）。

thecloud.txt 是 thecloud.svg 的重复，但是使用不同的扩展名，因此 raw-loader 将处理它。

4. 将 divicon 的用法更改为：

      const cloudIcon = L.divIcon({
        html: this.cloudSrc.default, // thecloud, // this.cloudSvg, // thecloud,
        className: 'my-custom-icons',
        iconSize: [size, size],
        iconAnchor: [size/2, size/2]
      })

我不能说我了解这里发生的一切，例如为什么我需要 .default part或webpack配置部分，但这是有效的。