在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使用prototype定义对象类型(转)[
Dec 22 Javascript
给Javascript数组插入一条记录的代码
Aug 30 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
js绘制一条直线并旋转45度
Aug 21 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
用cookies来跟踪识别用户
2006/10/09 PHP
oracle资料库函式库
2006/10/09 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
[JS]点出统计器
2020/10/11 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python多线程并发实例及其优化
2019/06/27 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
Python序列类型的打包和解包实例
2019/12/21 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
清洁工岗位职责
2014/01/29 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
明星邀请函
2015/02/02 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
SQL Server 中的事务介绍
2022/05/20 SQL Server