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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
vue 使用原生组件上传图片的实例
Sep 08 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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
python构建自定义回调函数详解
2017/06/20 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
中级会计职业生涯规划范文
2014/01/16 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
运动会加油口号
2014/06/07 职场文书
自主招生自荐信格式
2015/03/04 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
SQL Server使用导出向导功能
2022/04/08 SQL Server
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android