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

svg-sprite使用的更多相关文章

  1. 在vue中使用svg sprite

    概述 这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...

  2. REM+SVG Sprite,web app案例

    REM+SVG Sprite,构建新时代web app <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&quo ...

  3. SVG Sprite 使用Symbol元素制作ICON

    介绍 SVG是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法.之前写过两篇关于CSS icon在页面显示的博客,后来了解到现在大多数前端团队和项目都在使用SVG Sprite这种方 ...

  4. [SVG] Combine Multiple SVGs into an SVG Sprite

    In this lesson, we’ll explore the process of combining all of your SVG icons into one SVG sprite, to ...

  5. SVG & Sprite & symbol & use

    SVG & Sprite & symbol & use https://www.zhangxinxu.com/sp/svgo/ https://www.zhangxinxu.c ...

  6. SVG Sprite 入门(SVG图标解决方案)

    关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明 ...

  7. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  8. 【转】【翻译】对响应式SVG的再思考

    来源: http://www.w3ctech.com/topic/1555 原文地址:http://www.smashingmagazine.com/2014/03/rethinking-respon ...

  9. Web 设计新趋势: 使用 SVG 代替 Web Icon Font

    如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法 ...

  10. Art-Directing SVG图像viewBox属性

    Art-Directing SVG图像viewBox属性 作者:彦子 日期:2015-06-02 点击:992 svg 译者注:根据Google Dev文档的解释,Art Direction在这篇文章 ...

随机推荐

  1. jquery判空 string类型的日期比较大小

    jquery 判空 if(value.length<=0){  alert("kongzhi"); } jquery string类型的日期比较大小 var startTim ...

  2. javaScript设计模式之面向对象编程(object-oriented programming,OOP)(二)

    接上一篇 面向对象编程的理解? 答:面向对象编程,就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与动作(方法).这个对象我们称之为类.面向对象编程思想其中一个特点就是封装,就是把你需 ...

  3. 死磕 java集合之CopyOnWriteArraySet源码分析——内含巧妙设计

    问题 (1)CopyOnWriteArraySet是用Map实现的吗? (2)CopyOnWriteArraySet是有序的吗? (3)CopyOnWriteArraySet是并发安全的吗? (4)C ...

  4. WebApi生成在线API文档--Swagger

    1.前言 1.1 SwaggerUI SwaggerUI 是一个简单的Restful API 测试和文档工具.简单.漂亮.易用(官方demo).通过读取JSON 配置显示API. 项目本身仅仅也只依赖 ...

  5. LitepalNewDemo【开源数据库ORM框架-LitePal2.0.0版本的使用】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo使用的是LitePal2.0.0版本,对于旧项目如何升级到2.0.0版本,请阅读<赶快使用LitePal 2.0版本 ...

  6. 使用Atlas进行元数据管理之Atlas简介

    背景:笔者和团队的小伙伴近期在进行数据治理/元数据管理方向的探索, 在接下来的系列文章中, 会陆续与读者们进行分享在此过程中踩过的坑和收获. 元数据管理系列文章: [0] - 使用Atlas进行元数据 ...

  7. Powershell:关于PSCustomObject你想知道的一切(译)

    PSCustomObject是Powershell里非常重要的一个工具,我们先从基础开始然后再循序渐进讲到一些更高级的话题.PSCustomObject旨在于用简单的方法来创建结构化数据.下面的第一个 ...

  8. sql servse 查询当前库内表索引值

    PERCENT --a.id, THEN c.name ELSE '' END AS 表名, THEN a.name ELSE '' END AS 索引名称, d.name AS 列名, b.keyn ...

  9. int-Integer-String之间的转换方式

    1.int和Integer之间的转换:   1) int----->Integer ①自动装箱 ②Integer的构造方法 ③调用Integer的静态方法:static Integer valu ...

  10. 对HTML5标签的认识(三)

    这篇随笔继续来认识HTML标签.这次随笔主要是对<table>标签的认识和最近我学习到的一些标签来和大家分享. 一.<table>标签 <table>标签的作用主要 ...