在vue项目中优雅的使用SVG的方法实例详解


Posted in Javascript onDecember 03, 2018

1、基础介绍

本文旨在介绍如何在项目中配置和方便的使用svg图标。
本文以vue项目为例,当然在react中的使用原理基本相似。
svg图标可以直接通过img标签来使用,也可当做icon来使用。
本文是参考了鑫旭大佬的文章:SVG Sprite技术介绍。

2、配置

安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,所以需要处理下:

{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000,          
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
}

cnpm i -D svg-sprite-loader。在static下新建svg文件夹,用来放置当做icon使用的svg,使用include,include和img做区分。然后修改webpack.base.conf.js配置,这样svg-sprite-loader只会处理我们指定的static/svg下的文件:

{
 test: /\.svg$/,
 loader: 'svg-sprite-loader',
 include: [resolve('static/svg')], // include => 只处理指定的文件夹下的文件
 options: {
  symbolId: 'icon-[name]'
 }
 },
 {
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 exclude: [resolve('static/svg')], // exclude => 不处理指定的文件夹下的文件
 options: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
 }

3、使用

在components下创建svg文件夹,创建Svg.vue文件:

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

在utils文件夹下创建svgConfig文件夹,创建index.js文件,全局注册svg-icon组件。

Vue.component('svg-icon', SvgIcon)

使用require.context自动导入文件,而不需要import一个个去引用:

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./../../../static/svg/', true, /\.svg$/)
requireAll(req)

在vue项目中优雅的使用SVG的方法实例详解

4. 在main.js在执行:

import '@/utils/svgConfig'

到此我们就可以直接在项目中使用:

<svg-icon icon-class="users" />

4、优化

虽然现在已经可以使用svg-icon,当是还无法直观的分辨svg,当svg文件比较多的时候,如果只能一个个的去查找将费时费力。为方便我们查找和使用svg,可以新建一个svg的列表页。

在pages文件下新建SvgList.vue文件,iconsMap为导入的svg文件数组,handleClipboard方法为点击复制的方法,通过安装clipboard实现(cnpm i -S clipboard):

<div class="icons-wrapper">
 <div v-for="item in iconsMap" :key="item" @click="handleClipboard(generateIconCode(item), $event)">
 <el-tooltip placement="top">
  <div slot="content">
  {{generateIconCode(item)}}
  </div>
  <div class="icon-item">
  <div>
   <span class="svg-wrap" @click.stop>
   <svg-icon :icon-class="item" />
   </span>
  </div>
  <span>{{item}}</span>
  </div>
 </el-tooltip>
 </div>
</div>

获取iconsMap,在utils文件夹下创建svgConfig文件夹,generateIconsView.js文件, 当然如果你使用了vuex,也可以保存在vuex中的state中:

const data = {
 state: {
 iconsMap: []
 },
 generate (iconsMap) {
 this.state.iconsMap = iconsMap
 }
}
export default data

将数据保存在iconsMap中:

在vue项目中优雅的使用SVG的方法实例详解

在SvgList.vue中使用:

<script>
import icons from '@/utils/svgConfig/generateIconsView'
export default {
 name: 'icons',
 data () {
 return {
  iconsMap: []
 }
 },
 mounted () {
 const iconsMap = icons.state.iconsMap.map((i) => {
  return i.default.id.split('-')[1]
 })
 this.iconsMap = iconsMap
 }
}
</script>

添加点击复制的提示和方法(cnpm i -S clipboard),在SvgList.vue中使用:

methods: {
 generateIconCode (symbol) {
  return `<svg-icon icon-class="${symbol}" />`
 },
 handleClipboard (text, event) {
  clipboard(text, event)
 }
}

在路由添加SvgList.vue的路由信息,页面效果如下:

在vue项目中优雅的使用SVG的方法实例详解

总结

以上所述是小编给大家介绍的在vue项目中优雅的使用SVG的方法实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
javascript 数组操作详解
Jan 29 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
React事件处理的机制及原理
Dec 03 #Javascript
JointJS流程图的绘制方法
Dec 03 #Javascript
微信小程序之事件交互操作实例分析
Dec 03 #Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 #Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 #Javascript
Vue.js 图标选择组件实践详解
Dec 03 #Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 #Javascript
You might like
浅析php中json_encode()和json_decode()
2014/05/25 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
jquery中radio checked问题
2015/03/16 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
GWebs公司笔试题
2012/05/04 面试题
销售行业个人求职自荐信
2013/09/25 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
党员个人承诺书
2015/04/27 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android