VUE-cli3使用 svg-sprite-loader


Posted in Javascript onOctober 20, 2018

VUE-cli3使用 svg-sprite-loader

svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html,接下来就可以在模版中方便地使用 svg-sprite 技术了。

使用 svg-sprite 的好处

  • 页面代码清爽
  • 可使用 ID 随处重复调用
  • 每个 SVG 图标都可以更改大小颜色

安装插件

npm install svg-sprite-loader --save-dev

webpack 配置,在Vue.config.js加入处理 svg 的 loader:

const path = require('path')
function resolve(dir) {
 return path.join(__dirname, '.', dir)
}
module.exports = {
 chainWebpack: config => {
  config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
  //const svgRule = config.module.rule('svg')
  //svgRule.uses.clear()
  config.module
   .rule('svg-sprite-loader')
   .test(/\.svg$/)
   .include
   .add(resolve('src/icons')) //处理svg目录
   .end()
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .options({
    symbolId: 'icon-[name]'
   })
 },
 configureWebpack: () => ({
  // resolve: {
  //  alias: require('./alias.config').webpack
  // }
  // module: {
  //  rules: [{
  //   test: /\.svg$/,
  //   use: [{
  //    loader: "svg-sprite-loader",
  //    options: {
  //     symbolId: 'icon-[name]'
  //    }
  //   }]
  //  }]
  // }
 })
}

这时候发现还是不行啊, body 中并没有看到 symbol 标签。

VUE-cli3使用 svg-sprite-loader

就是说只有我们自己引入的 svg 文件需要经过 svg-sprite-loader,那么就将这些 svg 统一放到一个目录下,我这里放到了 src/icons

然后要在用到的地方引入需要的svg

import './src/icon/target.svg';

重新启动项目,终于在 html 中看到了 symbol 标签!

配置好了,就可以用了。使用方法很简单,相较于原来插入 svg 图标的方法(img src 或将 svg 整个写入 html),用 svg-sprite 更加简单且清爽:

<svg><use xlink:href="#target" /></svg>

嗯,就这样短短一行。 xlink:href 中传入 svg ID 就好了,由于在上面的配置文件中我们直接使用文件名作为 symbol 的 ID,所以这里传入的 ID 即为你想显示的图标的 svg 文件名,记得加上 # 。

自动导入

你会发现,这里要想插入某个图标,都得 import ,每用一个都要重复一遍这个流程,太麻烦,那么我们就让 src/icons/svg/下的 svg 文件都自动导入吧。

webpack 可以帮我们做到:

// requires and returns all modules that match
const requireAll = requireContext => requireContext.keys().map(requireContext);
// import all svg
const req = require.context('./assets/svg', true, /\.svg$/);
requireAll(req);

代码实例:

VUE-cli3使用 svg-sprite-loader

首先在main.ts中引入import './icons/index',

icons/index.js,将icons/svg中的所有svg导入并注册全局组件SvgIcon

VUE-cli3使用 svg-sprite-loader

//SvgIcon组件代码

<template>
 <svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName"/>
 </svg>
</template>

<script>
export default {
 name: 'SvgIcon',
 props: {
  iconClass: {
   type: String,
   required: true
  },
  className: {
   type: String,
   default: ''
  }
 },
 computed: {
  iconName() {
   return `#icon-${this.iconClass}`
  },
  svgClass() {
   if (this.className) {
    return 'svg-icon ' + this.className
   } else {
    return 'svg-icon'
   }
  }
 }
}
</script>

<style scoped>
.svg-icon {
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}
</style>

接下来就可以使用组建了

VUE-cli3使用 svg-sprite-loader

关于 require.context 的详细用法,可以参考 webpack 文档:dynamic requires

这样一来,每当我们修改或增加新的 svg,只要将文件往这个目录下一扔,插件就会自动帮我们生成相应的 symbol 标签啦,接下来就只管用吧

Javascript 相关文章推荐
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
Vue如何清空对象
Mar 03 Vue.js
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 #Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 #Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 #Javascript
简化版的vue-router实现思路详解
Oct 19 #Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 #Javascript
浅析vue-router原理
Oct 19 #Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 #Javascript
You might like
YII路径的用法总结
2014/07/09 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
python删除过期文件的方法
2015/05/29 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
MYSQL基础面试题
2012/05/13 面试题
个人授权委托书模板
2014/09/14 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
怎么用Python识别手势数字
2021/06/07 Python