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 相关文章推荐
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
vue插件实现v-model功能
Sep 10 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
JS实现网站吸顶条
Jan 08 Javascript
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
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php数组添加元素方法小结
2014/12/20 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
详解angular中的作用域及继承
2017/05/31 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
python列表操作实例
2015/01/14 Python
Python使用turtule画五角星的方法
2015/07/09 Python
python 的列表遍历删除实现代码
2020/04/12 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
python解析含有重复key的json方法
2019/01/22 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
中文系师范生自荐信
2013/10/01 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
给小学生的新年寄语
2014/04/04 职场文书
工作自我评价范文
2019/03/21 职场文书