svg-sprite使用

chainWebpack(config) {

config.module

.rule('svg')

.exclude.add(path.resolve(__dirname,'src/assets/icons'))

.end();

config.module

.rule('icons')

.test(/\.svg$/)

.include.add(path.resolve(__dirname,'src/assets/icons'))

.end()

.use('svg-sprite-loader')

.loader('svg-sprite-loader')

.options({

symbolId: 'icon-[name]'

});

config.module

.rule('svg-file')

.test(/\.svg$/)

.exclude.add(path.resolve(__dirname,'src/assets/icons'))

.end()

.use('url-loader')

.loader('url-loader')

.options({

limit: 10000,

name: 'static/[name].[hash:8].[ext]',

});

},

<svg>

<use xlinkHref="#icon-about" />

</svg>

利用webpack提供的的require.contextAPI 来创建自己的context module动态引入icon

require.context(directory, useSubdirectories = false, regExp = /^\.\//);
第一个是文件夹，
第二个是是否使用子文件，
第三个是文件匹配的正则。

• keys()方法返回的该模块可以处理的所有可能请求的模块的数组，简单一点就是满足该参数的模块；
• resolve()返回的是请求的module的id;
• id是该context module的id;

const request = require.context('@/assets/icons', true, /\.svg$/);
request.keys().forEach(request);

 

参考

https://segmentfault.com/a/1190000015367490

https://juejin.im/post/5bc93881f265da0aea69ae2e

转载于:https://www.cnblogs.com/shangyueyue/p/10711734.html