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常用排序实现代码
Dec 28 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
vue实现路由切换改变title功能
May 28 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
PDO::getAttribute讲解
2019/01/28 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
css配合jquery美化 select
2013/11/29 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
Prototype框架详解
2015/11/25 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python client使用http post 到server端的代码
2013/02/10 Python
Python操作csv文件实例详解
2017/07/31 Python
python实现图片识别汽车功能
2018/11/30 Python
django的settings中设置中文支持的实现
2019/04/28 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
四议两公开实施方案
2014/03/28 职场文书
活动总结报告范文
2014/05/04 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书