【发布时间】：2020-08-28 23:25:21
【问题描述】：
好的，所以我主要使用 Laravel 和 Vue js 构建一个 Web 应用程序。我尝试使用https://github.com/JetBrains/svg-sprite-loader#installation，但导出的 svg 显示为空白。
在继续之前，我开始怀疑这是否真的值得，而且我不确定。
所以我的问题是，真正的区别是什么？
假设我们不能使用图标字体，因为我们想要多色的 svg。
是否值得尝试使用一个包将 svg 合并到一个 sprite 中然后使用它，或者它与 http/2 并没有真正的区别？
考虑到文件大小和数据使用情况，是否值得尝试使用 sprite 而不是多个外部 svg 文件来最小化这方面？
内联 svg 也是一种选择，但这会显着增加 dom 大小。
所以我想知道...有没有人尝试过所有这些技术并找出最好和最高效的技术以及它们的真正区别是什么。
最后，如果有人能给我一些关于为什么我的 svg sprite 显示为空白的意见，那将是一个巨大的奖励：P
我已经在我的 webpack.mix 中配置了上面的包，如下所示：
const mix = require('laravel-mix');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
module: {
rules: [
{
test: /resources\/images\/.*\.svg$/,
loader: 'svg-sprite-loader',
exclude: /node_modules/,
options: {
extract: true,
spriteFilename: 'icons-sprite.svg',
publicPath: 'images/sprites/',
}
}
]
},
plugins: [
new SpriteLoaderPlugin({ plainSprite: true}) // Sprites Plugin.
],
})
.version()【问题讨论】：
标签： svg webpack inline-svg svg-sprite svg-sprite-loader