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 ajax 同步异步的执行示例代码
Jun 23 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
原生js+ajax分页组件
Jan 30 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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 FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
Javascript Global对象
2009/08/13 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
Python中的并发编程实例
2014/07/07 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
python数据类型强制转换实例详解
2020/06/22 Python
python爬取youtube视频的示例代码
2021/03/03 Python
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
班主任工作经验材料
2014/02/02 职场文书
2014庆六一活动方案
2014/03/02 职场文书
2014年实验室工作总结
2014/12/03 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL