在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 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
详解js访问对象的属性和方法
Oct 25 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
php4的session功能评述(三)
2006/10/09 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
js继承的实现代码
2010/08/05 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
python实现redis三种cas事务操作
2017/12/19 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
python设置表格边框的具体方法
2020/07/17 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
密封类可以有虚函数吗
2014/08/11 面试题
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
资深地理教师自我评价
2013/09/21 职场文书
设计总监岗位职责
2013/12/07 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
七一党建活动方案
2014/01/28 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
学校班班通实施方案
2014/06/11 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android