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 相关文章推荐
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
puppeteer库入门初探
Jan 09 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
vue 页面跳转的实现方式
Jan 12 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
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Python sorted对list和dict排序
2020/06/09 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
工作的心得体会
2013/12/31 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
倡议书范文
2014/04/16 职场文书
雨花台导游词
2015/02/06 职场文书
基层党支部承诺书
2015/04/30 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
毕业证明书
2015/06/19 职场文书
2019秋季运动会口号
2019/06/25 职场文书
导游词之包公祠
2019/11/25 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书