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);

 

參考

http://www.javashuo.com/article/p-mjwxllci-da.html

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