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代码
May 27 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
js的延迟执行问题分析
Jun 23 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 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用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
cument.execCommand()用法深入理解
2012/12/04 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
python 连接sqlite及简单操作
2017/06/30 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Django实现基于类的分页功能
2019/10/31 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
法学求职信
2014/06/22 职场文书
员工试用期转正自我评价
2015/03/10 职场文书