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