javascript - 从 html (webpack) 引用散列的 svg

Question

我正在使用文件加载器将我的 svg spritesheet 哈希到 ./dist/svg/sprite.e3452.svg

{
    test: /\.(svg)$/,
    use: {
        loader: 'file-loader',
        options: {
            name: '[name].[hash:5].[ext]',
            outputPath: './svg/'
        }
    }
}

这可能是一个简单的问题，但是当名称随哈希值变化时，如何从 html 引用 svg 文件？

例如这里:

<svg class="close__icon">
    <use xlink:href="svg/sprite.svg#ios-trash-outline"></use>
</svg>

我使用 HtmlWebpackPlugin 来解决哈希 js 文件的类似问题，但找不到与我的 svgs 类似的任何内容。

谢谢

Answer 1

我不知道你是否解决了，但我也遇到了同样的问题，这里是解决方案。 Webpack 在 dom 中插入 sprite svg，您可以在 sprite id 后面使用下划线访问每个 id，在您的情况下:

<svg class="close__icon">
    <use xlink:href="#sprite_ios-trash-outline"></use>
</svg>