在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 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
javascript 闭包
Sep 15 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
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实现WEB动态网页静态
2006/10/09 PHP
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php session的锁和并发
2016/01/22 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
python实现简单的学生管理系统
2021/02/22 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
大学生物业管理求职信
2013/10/24 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
个人买房协议书范本
2014/10/06 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python