我需要在 laravel mix 上配置构建 SVG 精灵。
我尝试了 webpack 下的几个库,result = 0
.
有人可以建议如何配置吗?
在webpack.mix.js或app.js中何处编写处理程序代码?
我需要在 laravel mix 上配置构建 SVG 精灵。
我尝试了 webpack 下的几个库,result = 0
.
有人可以建议如何配置吗?
在webpack.mix.js或app.js中何处编写处理程序代码?
我能够让 SVG 精灵与 Laravel Mix 和 svg-spritemap-webpack-plugin 一起工作的一种方法。
首先安装spritemap插件
npm install svg-spritemap-webpack-plugin --save-dev
然后像这样添加配置webpack.mix.js
:
const mix = require('laravel-mix');
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
// Set up the spritemap plugin
mix.webpackConfig({
plugins: [
new SVGSpritemapPlugin({
src:'assets/svg/icons/*.svg',
filename: '/svg/icons.svg',
prefix: '',
svg4everybody: true,
svgo: {
removeTitle: true,
removeStyleElement: true,
cleanupNumericValue: true,
},
})
]
});
// Adapt laravel-mix webpack config to better handle svg images.
Mix.listen('configReady', (webpackConfig) => {
// Add separate svg loader
webpackConfig.module.rules.push({
test: /\.(svg)$/,
include: /assets\/svg/,
loaders: [
{
loader: 'file-loader',
options: {
name: 'svg/[name].[ext]?[hash]',
publicPath: Config.resourceRoot
}
},
{
loader: 'img-loader',
options: Config.imgLoaderOptions
}
]
});
// Exclude local 'svg' folder from font loader
let fontLoaderConfig = webpackConfig.module.rules.find(rule => String(rule.test) === String(/\.(woff2?|ttf|eot|svg|otf)$/))
fontLoaderConfig.exclude = /(assets\/svg)/;
});
有了这个,您应该能够将 *.svg 文件添加到/resources/assets/svg/*.svg
复制到公共的文件中,并获得一个 svg 精灵/resources/assets/svg/icons/*.svg