在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 取时间差去掉周六周日实现代码
Dec 25 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 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中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP的基本常识小结
2013/07/05 PHP
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
JS分页效果示例
2013/10/11 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
javascript实现拖放效果
2015/12/16 Javascript
js实现分割上传大文件
2016/03/09 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
layui实现table加载的示例代码
2018/08/14 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
我的中国梦演讲稿600字
2014/08/19 职场文书