vue项目中使用Svg的方法


Posted in Javascript onOctober 24, 2018

github demo: github地址

闲聊背景

本文主要以 vue-cli3 搭建的项目为例,来聊一下如何在项目中更优雅的使用 svg 。

众所周知, vue-cli3 已经推出很长一段时间了,大家可以感受一下 vue-cli3 带来的零配置体验。But,也相应带来了一些弊端,就是如归需要修改默认的 loader 时,会比较麻烦。

们接下来主要使用的就是上文中提到的 svg 的 use ,先上一张 vue-cli3 搭建的项目的目录,可以看到根目录下只保留了 public/ 以及 src/ ,可以说非常干净,大家可以自己创建一个。

vue项目中使用Svg的方法

在 src/components/ 下创建 SvgIcon 组件

<template>
 <svg :class="svgClass" aria-hidden="true">
 <use :xlink:href="iconName"/>
 </svg>
</template>

<script>
export default {
 name: 'SvgIcon',
 props: {
 iconClass: {
  type: String,
  required: true,
 },
 className: {
  type: String,
  default: '',
 },
 },
 computed: {
 iconName () {
  return `#icon-${this.iconClass}`
 },
 svgClass () {
  if (this.className) {
  return 'svg-icon ' + this.className
  } else {
  return 'svg-icon'
  }
 },
 },
}
</script>

<style scoped>
.svg-icon {
 width: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}
</style>

在 src/ 下创建一个 icons 目录,目录结构如下:

vue项目中使用Svg的方法

svg 目录主要用于存放 svg 文件,来看一下 index.js 的内容,功能就是把组件注册到全局,方便使用:

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件

// 注册到全局
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

当然,如果你有自己的想法或需求,可以单独引入,无需非要注册到全局。

在 main.js 中引入

vue项目中使用Svg的方法

这一步就没什么好说的了,如果需要注册到全局,需要在入口文件中引入。

好了,接下来是最重要的一步:

修改默认的 loader :

大家可以去vue-cli3官网去查看具体教程,这里我只说需要修改的 loader 以及具体的代码实现。

首先需要注意的是,通过 vue-cli3 构建的项目可以初始化进行很多选择,我构建的目录更多的是以 *.config.js 的形式存在的。

在根目录下创建一个名为 vue.config.js 文件,接下来的操作都和它有关,先来看一下它完整的代码:

const path = require('path')

function resolve (dir) {
 return path.join(__dirname, './', dir)
}

module.exports = {
 chainWebpack: config => {
 config.plugin('define').tap(args => {
  const argv = process.argv
  const icourt = argv[argv.indexOf('--icourt-mode') + 1]

  args[0]['process.env'].MODE = `"${icourt}"`

  return args
 })
 // svg rule loader
 const svgRule = config.module.rule('svg') // 找到svg-loader
 svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
 svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
 svgRule // 添加svg新的loader处理
  .test(/\.svg$/)
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({
  symbolId: 'icon-[name]',
  })

 // 修改images loader 添加svg处理
 const imagesRule = config.module.rule('images')
 imagesRule.exclude.add(resolve('src/icons'))
 config.module
  .rule('images')
  .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
 },
 configureWebpack: {
 devServer: {
  open: true,
  // https: true,
  proxy: {
  '/user': {
   target: 'https://devadminschool.icourt.cc',
  },
  '/live': {
   target: 'https://devadminschool.icourt.cc',
  },
  },
 },
 },
}

大家忽略无关紧要的代码,重点从 svg rule loader 注释开始,其实注释已经比较详细了,就是获取默认的 loader 并进行相关的修改,主要有 svg-loader 、 images-loader ,从 vue-cli3 基础loader 中可以找到这两个 loader 的默认配置。

// 默认的svg loader...
webpackConfig.module
 .rule('svg')
 .test(/\.(svg)(\?.*)?$/)
 .use('file-loader')
  .loader('file-loader')
  .options({
  name: genAssetSubPath('img')
  })
  
// 默认的images loader...
webpackConfig.module
  .rule('images')
  .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
  .use('url-loader')
   .loader('url-loader')
   .options(genUrlLoaderOptions('img'))

对比我一开始的代码可以看出,我把默认的 svg loader 配置中使用的 file-loader 改为了 svg-sprite-loader ,并排除了 node_modules ,把默认的 images-loader 配置添加了 svg ,并排除了 src/icons 目录。

如何使用?

  • 可以把设计大大给的svg 或者从iconfont官网下载开源的icon的svg格式,复制到 src/icons/svg 目录下;
  • 点击 svg 查看源码,修改 fill 属性, fill="currentColor" ,或者 fill="" ,如果无此属性,就不用管,这样做是可以让外部控制icon的颜色,或随父元素的color;
  • 注意svg命名和SvgIcon命名一致,看一下最终使用:

vue项目中使用Svg的方法

这里就会使用 src/icons/svg/go-back.svg 文件。

总结:

以上讲的比较糙,奈何文字功底是硬伤,最后附上github demo 代码示例:
此项目也可以当做项目初始架构,内置了vue-router、vuex等。
本文以vue-cli3创建的项目为例,之前的项目可以直接去手动修改对应的loader即可。

github地址

总结

以上所述是小编给大家介绍的vue项目中使用Svg的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
vue router使用query和params传参的使用和区别
Nov 13 Javascript
javaScript中的空值和假值
Dec 18 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 #Javascript
小程序云开发初探(小结)
Oct 24 #Javascript
vue-cli V3.0版本的使用详解
Oct 24 #Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 #Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 #Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 #Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 #Javascript
You might like
用PHP生成自己的LOG文件
2006/10/09 PHP
PHPlet在Windows下的安装
2006/10/09 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
php文件读取方法实例分析
2015/06/20 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python实现证件照换底功能
2019/08/20 Python
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
服装设计行业个人的自我评价
2013/12/20 职场文书
工作交流会欢迎词
2014/01/12 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
辞职信标准格式
2015/02/27 职场文书
欠款起诉书范文
2015/05/19 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python