在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 14 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
JS 自动安装exe程序
2008/11/30 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
Js基础学习资料
2010/11/23 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
vue.js表格分页示例
2016/10/18 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
详解Python装饰器由浅入深
2016/12/09 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
《值日生》教学反思
2014/02/17 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
五四青年节活动总结
2015/02/10 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
科技活动总结范文
2015/05/11 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
如何写好竞聘报告
2019/04/03 职场文书
Python中for后接else的语法使用
2021/05/18 Python
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏