使用Webpack加载src/icons/home中的SVG图片作为SVG Sprite
是的,路径是正确的。将svg格式的图片放在src/icons/home文件夹中,并通过webpack配置将其加载为svg-sprite。
import * as path from 'path'
// const resolve = (dir) => path.resolve(__dirname, dir)
// const postcssPxToViewport = require('postcss-px-to-viewport')
module.exports = {
webpack: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
configure: (
webpackConfig: any,
{ env, paths }: { env: any; paths: any }
) => {
webpackConfig.module.rules[1].oneOf = [
...[
{
test: /.svg$/, // 存放svg的文件夹
include: path.resolve('./src/icons'),
use: [
{ loader: 'svg-sprite-loader', options: {} },
{ loader: 'svgo-loader', options: { symbolId: 'icon-[name]' } },
],
},
],
...webpackConfig.module.rules[1].oneOf,
]
return webpackConfig
},
},
devServer: {
open: false,
},
}
该配置使用svg-sprite-loader和svgo-loader将SVG文件加载为Sprite,并使用symbolId属性自定义生成的符号ID。
原文地址: http://www.cveoy.top/t/topic/olgi 著作权归作者所有。请勿转载和采集!