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 相关文章推荐
JavaScript实用技巧(一)
Aug 16 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 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中foreach循环中使用引用要注意的地方
2011/01/02 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
Vue实现验证码功能
2019/12/03 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python语言描述随机梯度下降法
2018/01/04 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
django model object序列化实例
2020/03/13 Python
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
经典大学生求职信范文
2014/01/06 职场文书
员工培训邀请函
2014/02/02 职场文书
节能减耗标语
2014/06/21 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
盗窃案辩护词
2015/05/21 职场文书
2015年司法局工作总结
2015/05/22 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
MySQL数据库表约束讲解
2022/06/21 MySQL