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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
javascript面向对象编程代码
Dec 19 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
Vuex提升学习篇
Jan 11 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 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
document 和 document.all 分别什么时候用
2006/06/22 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
Python中修改字符串的四种方法
2018/11/02 Python
Python 元组操作总结
2019/09/18 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
什么是规则表达式
2012/05/03 面试题
监理员的岗位职责
2013/11/13 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
学校开除通知书
2015/04/25 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis