浅析vue cli3 封装Svgicon组件正确姿势(推荐)


Posted in Javascript onApril 27, 2020

vue cli3 手把手教学封装Svgicon组件

第一步:在src文件下新建一个放置svg文件的文件夹

浅析vue cli3 封装Svgicon组件正确姿势(推荐)

第二步:在components文件下新建一个Svg组件

这是一个 文件夹 专门用来存放项目里面需要使用的svg文件,比如 a.svg b.svg …

浅析vue cli3 封装Svgicon组件正确姿势(推荐)

svg组件源码

<template>
 <svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName"></use>
 </svg>
</template>

<script type="text/ecmascript-6">
/* icon组件实现自动引入 ../../Icons/svg 下面所有的图标了
*之后我们就要使用到 webpack 的 require.context。
很多人对于 require.context可能比较陌生,
直白的解释就是require.context("./test", false, /.test.js$/); 
这行代码就会去 test 文件夹(不包含子目录)
下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。 
更直白的说就是 我们可以通过正则匹配引入相应的文件模块*/
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('../../Icons/svg', false, /\.svg$/)
requireAll(req)
export default {
 name: 'Svgicon',
 props: {
  iconClass: {
   type: String,
   required: true
  },
  className: {
   type: String
  }
 },
 computed: {
  iconName () {
   return `#icon-${this.iconClass}`
  },
  svgClass () {
   if (this.className) {
    return 'svg-icon ' + this.className
   } else {
    return 'svg-icon'
   }
  }
 }
}
</script>

<style>
.svg-icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
 }
</style>

第三步:配置vue.config.js

  • 需要的loader
  • npm i svg-sprite-loader -D
chainWebpack: config => {
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .options({
    symbolId: 'icon-[name]'
   })
}

 以上就配置完毕

注:未注册组件在人口文件全局注册即可使用(main.js)

到此这篇关于浅析vue cli3 封装Svgicon组件正确姿势(推荐)的文章就介绍到这了,更多相关vue cli3 Svgicon组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
js replace 全局替换的操作方法
Jun 12 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
react组件基本用法示例小结
Apr 27 #Javascript
react基本安装与测试示例
Apr 27 #Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 #Javascript
JS浏览器BOM常见操作实例详解
Apr 27 #Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 #Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 #Javascript
JS严格模式原理与用法实例分析
Apr 27 #Javascript
You might like
php explode函数实例代码
2012/02/27 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
使用js 设置url参数
2013/07/08 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python numpy 点数组去重的实例
2018/04/18 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
python集合常见运算案例解析
2019/10/17 Python
在python中做正态性检验示例
2019/12/09 Python
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
北体毕业生求职信
2014/02/28 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
2015年大学生工作总结
2015/04/21 职场文书
财务年终工作总结大全
2019/06/20 职场文书
mysql优化
2021/04/06 MySQL
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
配置nginx负载均衡
2022/05/06 Servers