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 20 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
JS实现可控制的进度条
Mar 25 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 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中的日期及时间
2006/11/23 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
党员实事承诺书
2014/03/26 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书