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对象的函数
Dec 22 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
jQuery实现本地存储
Dec 22 jQuery
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
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
Python中生成器和迭代器的区别详解
2018/02/10 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
django和vue实现数据交互的方法
2019/08/21 Python
python分布式计算dispy的使用详解
2019/12/22 Python
python随机模块random使用方法详解
2020/02/14 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
python 两种方法删除空文件夹
2020/09/29 Python
python给list排序的简单方法
2020/12/10 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
标准导师推荐信(医学类)
2013/10/28 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
数学教育专业求职信
2014/07/22 职场文书
个人总结与自我评价
2014/09/18 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL