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. .NET Core微服务之基于IdentityServer建立授权与验证服务(续)

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 上一篇我们基于IdentityServer4建立了一个AuthorizationServer,并且继承了QuickStartUI,能够成功 ...

  2. 从零开始学习PYTHON3讲义(十四)写一个mp3播放器

    <从零开始PYTHON3>第十四讲 通常来说,Python解释执行,运行速度慢,并不适合完整的开发游戏.随着电脑速度的快速提高,这种情况有所好转,但开发游戏仍然不是Python的重点工作. ...

  3. Docker中完成Jenkins的安装

    去年就开始学习采用Docker+Jenkins+.Net Core搭建生成式流水线,一直拖到现在,也没有彻底的好好静下来去总结总结.趁着现在对自己的严格要求下,逐渐开始重视自我总结,以此来巩固逐渐失去 ...

  4. 【Python3爬虫】为什么你的博客没人看呢?

    我相信对于很多爱好和习惯写博客的人来说,如果自己的博客有很多人阅读和评论的话,自己会非常开心,但是你发现自己用心写的博客却没什么人看,多多少少会觉得有些伤心吧?我们今天就来看一下为什么你的博客没人看呢 ...

  5. Vue2.0源码阅读笔记(二):响应式原理

      Vue是数据驱动的框架,在修改数据时,视图会进行更新.数据响应式系统使得状态管理变的简单直接,在开发过程中减少与DOM元素的接触.而深入学习其中的原理十分有必要,能够回避一些常见的问题,使开发变的 ...

  6. Python:tesserocr 在 windows 下的安装及简单使用

    tesserocr 是 python 的一个 OCR 库,它是对 tesseract 做的一层 Python API 封装,所以他的核心是tesseract. tesseract 的安装见 https ...

  7. javascript 倒计数功能

    最近在项目中遇到一个倒计时功能,在网上没有找到合适的,就自己写了个方法.贴在这里,权且当个记录. export const timeRun = (timeStr, callBack) => { ...

  8. 通过Hutool 调用远程API接口(POST/GET)

    背景:需要调用第三方接口,开启某项任务,用Hutool代替了HttpClient 调用第三方接口,简单粗暴. 代码如下: import java.util.Date; import org.apach ...

  9. PHP+nginx 启动后访问超时

    场景 在Windows上, nginx配置并启动后, 访问报504超时 解决 很尴尬, php-cgi没启动 php-cgi -b

  10. Android 离线人脸识别 ArcFace 2.0 Demo开发分享

    环境要求     1.运行环境 armeabi-v7a     2.系统要求 Android 5.0 (API Level 21)及以上     3.开发环境 Android Studio   下载地 ...